Soumettre la recherche
Mettre en ligne
Component-based Front-End architecture
•
1 j'aime
•
1,853 vues
Artyom Trityak
Suivre
Architecture patterns for front-end apps
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 26
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем ...
WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем ...
GeeksLab Odessa
Viper
Viper
Jacob Van Brunt
Flux architecture
Flux architecture
Badr Zaman [Front End , J2EE ]
Moving From AngularJS to Angular 2
Moving From AngularJS to Angular 2
Exilesoft
Introduction à Application Insights
Introduction à Application Insights
MSDEVMTL
State Management in Angular/React
State Management in Angular/React
DEV Cafe
Web without framework
Web without framework
Nicolas Jorand
Flux and React.js
Flux and React.js
sara stanford
Recommandé
WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем ...
WebCamp: Developer Day: Архитектура приложений на основе компонентов - Артем ...
GeeksLab Odessa
Viper
Viper
Jacob Van Brunt
Flux architecture
Flux architecture
Badr Zaman [Front End , J2EE ]
Moving From AngularJS to Angular 2
Moving From AngularJS to Angular 2
Exilesoft
Introduction à Application Insights
Introduction à Application Insights
MSDEVMTL
State Management in Angular/React
State Management in Angular/React
DEV Cafe
Web without framework
Web without framework
Nicolas Jorand
Flux and React.js
Flux and React.js
sara stanford
Sexy Architecting. VIPER: MVP on steroids
Sexy Architecting. VIPER: MVP on steroids
Dmytro Zaitsev
State management in react applications (Statecharts)
State management in react applications (Statecharts)
Tomáš Drenčák
Ajax ppt
Ajax ppt
Gnaneshwar Kandikonda
ASP.NET MVC Fundamental
ASP.NET MVC Fundamental
ldcphuc
Angularjs Basics
Angularjs Basics
Jayantha Sirisena
Serverless Computing With Azure Functions
Serverless Computing With Azure Functions
Jaliya Udagedara
Angular js
Angular js
Rajashekar Bhagavatula
Backbone introdunction
Backbone introdunction
mzxbupt
Introduction to React, Flux, and Isomorphic Apps
Introduction to React, Flux, and Isomorphic Apps
Federico Torre
Ajax PPT
Ajax PPT
Hub4Tech.com
Sitecore MVC Advanced
Sitecore MVC Advanced
Kevin Brechbühl
An open source, scalable queuing solution on top of apache kafka 2019
An open source, scalable queuing solution on top of apache kafka 2019
Yaniv Bronhaim
Angular patterns
Angular patterns
Premkumar M
Getting started with react & redux
Getting started with react & redux
Girish Talekar
Cracking web development
Cracking web development
Eyal Kenig
Easy Ice Service
Easy Ice Service
PierrickL
What is AngularJS and Describe it in Details
What is AngularJS and Describe it in Details
Hiren Korat
Rails notification
Rails notification
baran19901990
M6 l8-ajax-handout
M6 l8-ajax-handout
Nolboo Kim
ASP.NET 4.5 webforms
ASP.NET 4.5 webforms
Abhishek Sur
Smart and Dumb Components
Smart and Dumb Components
Shai Reznik
Ejecución estratégica cede
Ejecución estratégica cede
CFIE Center for Innovative Execution
Contenu connexe
Tendances
Sexy Architecting. VIPER: MVP on steroids
Sexy Architecting. VIPER: MVP on steroids
Dmytro Zaitsev
State management in react applications (Statecharts)
State management in react applications (Statecharts)
Tomáš Drenčák
Ajax ppt
Ajax ppt
Gnaneshwar Kandikonda
ASP.NET MVC Fundamental
ASP.NET MVC Fundamental
ldcphuc
Angularjs Basics
Angularjs Basics
Jayantha Sirisena
Serverless Computing With Azure Functions
Serverless Computing With Azure Functions
Jaliya Udagedara
Angular js
Angular js
Rajashekar Bhagavatula
Backbone introdunction
Backbone introdunction
mzxbupt
Introduction to React, Flux, and Isomorphic Apps
Introduction to React, Flux, and Isomorphic Apps
Federico Torre
Ajax PPT
Ajax PPT
Hub4Tech.com
Sitecore MVC Advanced
Sitecore MVC Advanced
Kevin Brechbühl
An open source, scalable queuing solution on top of apache kafka 2019
An open source, scalable queuing solution on top of apache kafka 2019
Yaniv Bronhaim
Angular patterns
Angular patterns
Premkumar M
Getting started with react & redux
Getting started with react & redux
Girish Talekar
Cracking web development
Cracking web development
Eyal Kenig
Easy Ice Service
Easy Ice Service
PierrickL
What is AngularJS and Describe it in Details
What is AngularJS and Describe it in Details
Hiren Korat
Rails notification
Rails notification
baran19901990
M6 l8-ajax-handout
M6 l8-ajax-handout
Nolboo Kim
ASP.NET 4.5 webforms
ASP.NET 4.5 webforms
Abhishek Sur
Tendances
(20)
Sexy Architecting. VIPER: MVP on steroids
Sexy Architecting. VIPER: MVP on steroids
State management in react applications (Statecharts)
State management in react applications (Statecharts)
Ajax ppt
Ajax ppt
ASP.NET MVC Fundamental
ASP.NET MVC Fundamental
Angularjs Basics
Angularjs Basics
Serverless Computing With Azure Functions
Serverless Computing With Azure Functions
Angular js
Angular js
Backbone introdunction
Backbone introdunction
Introduction to React, Flux, and Isomorphic Apps
Introduction to React, Flux, and Isomorphic Apps
Ajax PPT
Ajax PPT
Sitecore MVC Advanced
Sitecore MVC Advanced
An open source, scalable queuing solution on top of apache kafka 2019
An open source, scalable queuing solution on top of apache kafka 2019
Angular patterns
Angular patterns
Getting started with react & redux
Getting started with react & redux
Cracking web development
Cracking web development
Easy Ice Service
Easy Ice Service
What is AngularJS and Describe it in Details
What is AngularJS and Describe it in Details
Rails notification
Rails notification
M6 l8-ajax-handout
M6 l8-ajax-handout
ASP.NET 4.5 webforms
ASP.NET 4.5 webforms
En vedette
Smart and Dumb Components
Smart and Dumb Components
Shai Reznik
Ejecución estratégica cede
Ejecución estratégica cede
CFIE Center for Innovative Execution
displair
displair
alexbasso78
estafas a través de subastas en linea
estafas a través de subastas en linea
lorenacg999
Geospatial web apps development with OpenGeo Suite Client SDK (GXP)
Geospatial web apps development with OpenGeo Suite Client SDK (GXP)
Alberto Apellidos
Herramientas de interconexión (Electiva 5)
Herramientas de interconexión (Electiva 5)
minichuto
OpenEnergyMonitor: Univeristy of Turin GreenTo Build Workshop
OpenEnergyMonitor: Univeristy of Turin GreenTo Build Workshop
OpenEnergyMonitor
MBM Course Details | by Tribhuvan University
MBM Course Details | by Tribhuvan University
Hem Pokhrel
Decorative arts at ntu
Decorative arts at ntu
lharne
Inducción a procesos pedagogicos
Inducción a procesos pedagogicos
MCLT1970
Derrame pleural e hidrotórax
Derrame pleural e hidrotórax
Angelica Johana
DNR sintezė
DNR sintezė
martyynyyte
CMG2013 Workshop: Netflix Cloud Native, Capacity, Performance and Cost Optimi...
CMG2013 Workshop: Netflix Cloud Native, Capacity, Performance and Cost Optimi...
Adrian Cockcroft
Codigos de identificacion de los Distritos y Circuitos a nivel Nacional
Codigos de identificacion de los Distritos y Circuitos a nivel Nacional
Vethowen Chica
Yow Conference Dec 2013 Netflix Workshop Slides with Notes
Yow Conference Dec 2013 Netflix Workshop Slides with Notes
Adrian Cockcroft
Bservice report
Bservice report
YeeQun
Introduction to angular 2
Introduction to angular 2
Dor Moshe
How to Use Slideshare
How to Use Slideshare
Converting Copy
jQuery Essentials
jQuery Essentials
Marc Grabanski
Die Schlacht über der Tunguska Seit Jahrtausenden Kämpfe im Weltall und in un...
Die Schlacht über der Tunguska Seit Jahrtausenden Kämpfe im Weltall und in un...
Axel Thiel
En vedette
(20)
Smart and Dumb Components
Smart and Dumb Components
Ejecución estratégica cede
Ejecución estratégica cede
displair
displair
estafas a través de subastas en linea
estafas a través de subastas en linea
Geospatial web apps development with OpenGeo Suite Client SDK (GXP)
Geospatial web apps development with OpenGeo Suite Client SDK (GXP)
Herramientas de interconexión (Electiva 5)
Herramientas de interconexión (Electiva 5)
OpenEnergyMonitor: Univeristy of Turin GreenTo Build Workshop
OpenEnergyMonitor: Univeristy of Turin GreenTo Build Workshop
MBM Course Details | by Tribhuvan University
MBM Course Details | by Tribhuvan University
Decorative arts at ntu
Decorative arts at ntu
Inducción a procesos pedagogicos
Inducción a procesos pedagogicos
Derrame pleural e hidrotórax
Derrame pleural e hidrotórax
DNR sintezė
DNR sintezė
CMG2013 Workshop: Netflix Cloud Native, Capacity, Performance and Cost Optimi...
CMG2013 Workshop: Netflix Cloud Native, Capacity, Performance and Cost Optimi...
Codigos de identificacion de los Distritos y Circuitos a nivel Nacional
Codigos de identificacion de los Distritos y Circuitos a nivel Nacional
Yow Conference Dec 2013 Netflix Workshop Slides with Notes
Yow Conference Dec 2013 Netflix Workshop Slides with Notes
Bservice report
Bservice report
Introduction to angular 2
Introduction to angular 2
How to Use Slideshare
How to Use Slideshare
jQuery Essentials
jQuery Essentials
Die Schlacht über der Tunguska Seit Jahrtausenden Kämpfe im Weltall und in un...
Die Schlacht über der Tunguska Seit Jahrtausenden Kämpfe im Weltall und in un...
Similaire à Component-based Front-End architecture
ASP.NET MVC as the next step in web development
ASP.NET MVC as the next step in web development
Volodymyr Voytyshyn
Developing maintainable Cordova applications
Developing maintainable Cordova applications
Ivano Malavolta
ASP.NET MVC 2.0
ASP.NET MVC 2.0
Buu Nguyen
Azure Application insights - An Introduction
Azure Application insights - An Introduction
Matthias Güntert
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
Edureka!
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
Jennifer Estrada
MongoDB World 2018: Ch-Ch-Ch-Ch-Changes: Taking Your Stitch Application to th...
MongoDB World 2018: Ch-Ch-Ch-Ch-Changes: Taking Your Stitch Application to th...
MongoDB
Building intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery
Alek Davis
Build Java Web Application Using Apache Struts
Build Java Web Application Using Apache Struts
weili_at_slideshare
Backbone.js
Backbone.js
Ivano Malavolta
Intoduction to Play Framework
Intoduction to Play Framework
Knoldus Inc.
Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
MskDotNet Community
[2015/2016] Backbone JS
[2015/2016] Backbone JS
Ivano Malavolta
Building intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery
Alek Davis
Medium TechTalk — iOS
Medium TechTalk — iOS
jimmyatmedium
Backbone JS for mobile apps
Backbone JS for mobile apps
Ivano Malavolta
Angular JS, A dive to concepts
Angular JS, A dive to concepts
Abhishek Sur
Mvc3 crash
Mvc3 crash
Melick Baranasooriya
Asp.net mvc basic introduction
Asp.net mvc basic introduction
Bhagath Gopinath
Similaire à Component-based Front-End architecture
(20)
ASP.NET MVC as the next step in web development
ASP.NET MVC as the next step in web development
Developing maintainable Cordova applications
Developing maintainable Cordova applications
ASP.NET MVC 2.0
ASP.NET MVC 2.0
Azure Application insights - An Introduction
Azure Application insights - An Introduction
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
MongoDB World 2018: Ch-Ch-Ch-Ch-Changes: Taking Your Stitch Application to th...
MongoDB World 2018: Ch-Ch-Ch-Ch-Changes: Taking Your Stitch Application to th...
Building intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery
Build Java Web Application Using Apache Struts
Build Java Web Application Using Apache Struts
Backbone.js
Backbone.js
Intoduction to Play Framework
Intoduction to Play Framework
Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
[2015/2016] Backbone JS
[2015/2016] Backbone JS
Building intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery
Medium TechTalk — iOS
Medium TechTalk — iOS
Backbone JS for mobile apps
Backbone JS for mobile apps
Angular JS, A dive to concepts
Angular JS, A dive to concepts
Mvc3 crash
Mvc3 crash
Asp.net mvc basic introduction
Asp.net mvc basic introduction
Plus de Artyom Trityak
Data fetching in React.js
Data fetching in React.js
Artyom Trityak
React Native
React Native
Artyom Trityak
React.js and Flux in details
React.js and Flux in details
Artyom Trityak
React.js for Back-End developers
React.js for Back-End developers
Artyom Trityak
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Artyom Trityak
Front-End UnitTesting
Front-End UnitTesting
Artyom Trityak
Just Test It
Just Test It
Artyom Trityak
FrontEnd Unit testing
FrontEnd Unit testing
Artyom Trityak
Requirejs in details v2
Requirejs in details v2
Artyom Trityak
Modern front-end
Modern front-end
Artyom Trityak
Backbonejs Full Stack
Backbonejs Full Stack
Artyom Trityak
CoffeeScript a-zA-Z
CoffeeScript a-zA-Z
Artyom Trityak
Sinonjs mocks
Sinonjs mocks
Artyom Trityak
Backbone widget apps
Backbone widget apps
Artyom Trityak
Green orange: Gruntjs, Mocha, Testacular (Karma)
Green orange: Gruntjs, Mocha, Testacular (Karma)
Artyom Trityak
Require.js in details
Require.js in details
Artyom Trityak
Plus de Artyom Trityak
(16)
Data fetching in React.js
Data fetching in React.js
React Native
React Native
React.js and Flux in details
React.js and Flux in details
React.js for Back-End developers
React.js for Back-End developers
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Front-End UnitTesting
Front-End UnitTesting
Just Test It
Just Test It
FrontEnd Unit testing
FrontEnd Unit testing
Requirejs in details v2
Requirejs in details v2
Modern front-end
Modern front-end
Backbonejs Full Stack
Backbonejs Full Stack
CoffeeScript a-zA-Z
CoffeeScript a-zA-Z
Sinonjs mocks
Sinonjs mocks
Backbone widget apps
Backbone widget apps
Green orange: Gruntjs, Mocha, Testacular (Karma)
Green orange: Gruntjs, Mocha, Testacular (Karma)
Require.js in details
Require.js in details
Dernier
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Raghuram Pandurangan
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
LoriGlavin3
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
LoriGlavin3
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
MounikaPolabathina
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
Dilum Bandara
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Florian Wilhelm
Dernier
(20)
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Component-based Front-End architecture
1.
Component-based Front-End Architecture Artyom Trityak
2.
Real app?
3.
Done!
4.
Real app
5.
Real app
6.
7.
Scalability? Oops…
8.
No panic!
9.
Hierarchical MVC
10.
Component Folder • Data
Layer (models, collections, services) • Views (Views, Directives) • Public API (Controller)* Component structure *At AngularJS app Services provides component Public API
11.
• Views, Models
creation • Public API, Listening events • Configuring initial state of component • Business logic Controller
12.
• Backbone.Controller • Marionette.Controller •
Angular.js Controller Controller implementation
13.
• Fetching /
saving data (ajax, jsonp etc) • Storing data and state • Data operations (sorting, filtering, processing) Data Layer
14.
• Backbone.Model • Backbone.Collection •
Angular.js Service Data Layer examples
15.
• Rendering templates •
DOM events binding (clicks, hovers etc) • Data Layer DOM binding (1-2 way) • No logic. NO LOGIC => • Triggering actions events to controller Views
16.
• Backbone.View • Angular.js
Directive Views examples
17.
What next? Components communication Publish user:get Listen user:get Component Users Component CV Server Get
CV for User X
18.
Deferred / Promises jQuery.deferred
Q
19.
Deferred / Promises
20.
Deferred / Promises App
Users App Server get data
21.
Components communication Publish user:get Listen user:get Component Users Component CV Server Get CV
for User X deferred resolve … …
22.
Deferred / Promises
23.
Deferred / Promises
24.
Global events: naming Project
prefix:Module name:Event name ! EC:USERS:GET EC:INVENTORY:RESET EC:INVENTORY:LOADED
25.
Screens Users Zoom Steps Steps Screen User details Screen … … •
Initialize components • Define screen routes • Define screen logic E V E N T S Menu
Télécharger maintenant