Client side modularization for modern web applications
0 likes311 views
The document discusses client-side modularization for modern web applications. It introduces the benefits of modularity such as leveraging frameworks, supporting team development, and easier troubleshooting. It then covers different types of modules like UI modules, behavioral modules, and infrastructure modules. It also discusses different implementations of modules using plain JavaScript objects, jQuery plugins, and jQuery UI widgets. It provides examples and guidelines for implementing modules with each approach.
![Benefits of Modularity
IN YOUR ZONE
6
•Leveraging frameworks
•Better support for an immersive UI
•Support for team-oriented development
•Explicit control over application initialization
•The ability to externally configure modules
•Decoupled module interactions
•Easier troubleshooting and debugging
•Easier code base maintenance
•Easier to [unit] test](https://image.slidesharecdn.com/client-sidemodularizationformodernwebapplications-141119025637-conversion-gate02/85/Client-side-modularization-for-modern-web-applications-6-320.jpg)
Client side modularization for modern web applications
- 2. Client-Side Modularization for Modern Web Applications Author: Remus Langu Date: 14.11.2012
- 3. Who am I? Senior Developer Orthodox Christian | Family Man
- 4. •Introduction •Benefits of Modularity •Identifying Module Boundaries •Functional Roles and Categories for Modules •JavaScript Module Implementations •Summary Agenda 4
- 5. Introduction IN YOUR ZONE 5 •Modern Web Applications common characteristics: • Interactive – constant feedback • Limit full-page reloads – fluid experience • Asynchronous – AJAX • Manage data – caching & prefetching •Common client-side patterns: • Module Pattern (jQuery Plug-ins, jQuery UI Widgets) • Namespaces (MS Ajax Toolkit) • MVC (Spinejs, Backbonejs, JavaScript MVC) • MVVM (Knockout, WinJS)
- 6. Benefits of Modularity IN YOUR ZONE 6 •Leveraging frameworks •Better support for an immersive UI •Support for team-oriented development •Explicit control over application initialization •The ability to externally configure modules •Decoupled module interactions •Easier troubleshooting and debugging •Easier code base maintenance •Easier to [unit] test
- 7. Identifying Module Boundaries IN YOUR ZONE 7 •Layout - groups of related UI elements
- 8. Identifying Module Boundaries IN YOUR ZONE 8 •Animations - separate from state management
- 9. Identifying Module Boundaries IN YOUR ZONE 9 •Data Refreshes
- 10. Functional Roles and Categories for Modules IN YOUR ZONE 10 •UI Modules - adding, removing and modifying UI elements
- 11. Functional Roles and Categories for Modules IN YOUR ZONE 11 •Behavioral Modules – add functionality to an existing element • Draggable • Droppable • Resizable • Selectable • Sortable
- 12. Functional Roles and Categories for Modules IN YOUR ZONE 12 •Infrastructure Modules - provide commonly needed functionality that isn’t related to the visual aspects • Data access • Communication • Logging • Caching
- 13. JavaScript Module Implementations IN YOUR ZONE 13 •JavaScript objects - not associated with visual elements •jQuery plug-ins - extend the jQuery framework functionality •jQuery UI Widgets - behave like user controls •Suggestions on how to choose the appropriate module implementation according to functional role:
- 14. Using JavaScript Objects as Modules IN YOUR ZONE 14 •Object literal syntax is preferred for creation •Anonymous function expression is preferred for defining functions •Understanding context • Use this for the current context • Functions can be called using any context • Useful for things like pub/sub and events •Closures - so variables can live beyond their scope
- 15. Using JavaScript Objects as Modules IN YOUR ZONE 15 •Immediate Functions • Pass in only global object • Executes after parsed • Private members are defined within the immediate function •When to use objects as modules • When the object isn't operating on DOM nodes • When JavaScript provides enough functionality
- 16. Using jQuery Plug-ins as Modules IN YOUR ZONE 16 •The recommended way to extend jQuery •$ is the synonym for jQuery •Made up of utility functions •Method chaining is intentional •Selectors
- 17. Using jQuery Plug-ins as Modules IN YOUR ZONE 17 •The Wrapped Set • A special collection of elements • Can treat like an array •Declaring Plugins
- 18. Using jQuery Plug-ins as Modules IN YOUR ZONE 18 •Merging Options •When to use Plug-ins • When changing multiple elements at once • When a function doesn't fit on another object
- 19. Using Widgets as Modules IN YOUR ZONE 19 •Specialized jQuery plug-in with useful built in capabilities for creating modules: • Stores state internally • Exposes public methods • Hides private methods • Inherits from another object • Offers per-instance configuration • Merges options with defaults automatically • Lifetime Management
- 20. Using Widgets as Modules IN YOUR ZONE 20 •Defining a widget •Using a widget •Public & Private methods: • Public methods are invoked through the widget function: • Private methods are prepended with an underscore by convention:
- 21. Using Widgets as Modules IN YOUR ZONE 21 •Options: • Merged with defaults automatically • Represent the widget's extensibility mechanism • Allow you to control coupling with other code
- 22. Using Widgets as Modules IN YOUR ZONE 22 •Events: • Expose as an option • Attach handler through options • Fire event using _trigger • Binding handlers
- 23. Using Widgets as Modules IN YOUR ZONE 23 •Lifetime Management: • _create • Called when the widget is first applied • Typically used for adding classes, creating elements, applying other widgets, storing references • _init • Called each time the widget method is called on an element • Invoked after _create • Can be used as a reset • destroy • Removes a widget from an element • To be called by users of the widget • Cleans up all namespaced events
- 24. Summary IN YOUR ZONE 24 •Benefits of modularity •Types of Modules •JavaScript Objects •jQuery Plug-ins •jQuery UI Widgets
- 25. Remus-Constantin Langu | Senior Developer [email protected] Skype remus.constantin.langu thank you IN YOUR ZONE 25
- 26. Resources and Further Reading IN YOUR ZONE 26 • Project Silk: Client-Side Web Development for Modern Browsers: http://msdn.microsoft.com/en-us/ library/hh396380.aspx • jQuery UI Developer Guidelines: http://docs.jquery.com/UI/Developer_Guide • jQuery Plug-in Authoring Guidelines: http://docs.jquery.com/Plugins/Authoring • jQuery UI Widgets: http://msdn.microsoft.com/en-us/library/hh404085.aspx • Widget QuickStart: http://msdn.microsoft.com/en-us/library/hh404102.aspx • Modular JavaScript with Plugins, and Widgets: http://locksmithdon.net/talks/jsmodularity.html
Editor's Notes
- #2: Va urez un bun venit la prima mea prezentare in Endava.
- #3: Subiectul pentru aceasta prezentare este “Client-Side Modularization for Modern Web Applications”. Continutul ei va cuprinde o serie de indrumari, de recomandari si practici in ce priveste proiectarea modulara a unei aplicatii, pe care eu personal le-am invatat dintr-un proiect (Silk Project) dezvoltat de catre o echipa de la Microsoft Patterns & Practices.
- #4: Inainte de a trece la agenda acestei prezentari mi-ar face placere sa incep cu o scurta descriere personala. Numele meu este Remus-Constantin Langu, lucrez la Endava de aproape 4 luni, ca senior developer. Inainte am mai lucrat vre-o 5 ani pe solutii enterprise la o alta firma. Sunt crestin-ortodox, casatorit, cu 2 copii momentan si am 27 de ani.
- #5: Aceasta este agenda prezentarii: Voi incepe cu o scurta introducere pentru a defini putin contextul in care se plaseaza subiectul prezentarii. Apoi vom vedea care sunt principalele avantaje pe care le ofera modularitatea unei aplicatii web. Vom indentifica o parte din factorii care influenteaza alegerea modulelor in aplicatie. Vom continua cu o scurta clasificare a modulelor dupa rolul functional al acestora. Pe urma, in a doua parte a prezentarii vom trece efectiv la modalitatile de implementare a modulelor in JavaScript. Si in final vom incheia cu un scurt rezumat.
- #6: Plaja de aplicatii web moderne este larga, dar totusi toate aceste aplicatii au niste caracteristici de baza comune. Aplicatiile web moderne sunt in primul rand interactive, si pentru a oferi utilizatorilor o experienta placuta si captivanta ele tind sa ofere un feedback constant la actiunile utilizatorilor prin mesaje, animatii, efecte, prin reimprospatarea automata a datelor pe ecran, s.a. Aplicatiile web moderne incearca sa limiteze sau chiar sa evite pe cat mai mult posibil reincarcarea completa a paginilor, tocmai pentru a pastra utilizatorul in context si pentru a-i oferi o experienta fluida in timp ce isi desfasoara activitatea. Pentru a evita reincarcarea completa a paginilor, aplicatiile web moderne sunt asincrone si folosesc Ajax pentru a incarca dinamic datele necesare, fragmente de pagina sau alte resurse necesare. Aplicatiile web moderne au o strategie de gestiune a datelor, atunci cand e cazul, au un mecanism de caching si de preincarcare a datelor tocmai pentru a sprijini performanta pe partea de client. Acest mecanism permite interfetei cu utilizatorul sa raspunda imediat la actiuni fara a mai fi necesar un apel la server pentru date. Ca urmare un alt beneficiu direct ar fi cresterea scalabilitatii aplicatiei, prin minimizarea impactului asupra resurselor de pe server. Organizarea codului JavaScript pe partea de client se poate face in diferite moduri: Prin module, cu ajutorul unor librarii care ofera functionalitate pentru creerea de module, cum ar fi jQuery Plug-ins si jQuery UI Widgets; Prin nume de spatii, un exemplu ar fi MS Ajax Toolkit; Cu sablonul MVC, folosind Spinejs sau Backbonejs sau altele; Cu sablonul MVVM, folosind Knockout sau alta librarie.
- #7: O aplicatie modulara este impartita in unitati functionale numite module, care pot facilita dezvoltarea, testarea, lansarea si extinderea aplicatiei. Proiectarea modulara a unei aplicatii ofera o serie de beneficii, care pot fi usor observate de-a lungul intregului ciclu de viata al aplicatiei, care include proiectare, dezvoltare, testare, rezolvarea problemelor si intretinere. Daca folosim doar obiecte JavaSript pentru creerea modulelor, vom ajunge in final la un cod sursa mult mai mare decat ar fi necesar; Alternativa ar fi sa folosim un cadru, cum ar fi jQuery sau alte biblioteci, care sa permita o proiectare modulara. Pentru a oferi utilizatorului o experienta captivanta e necesara abordarea unor tehnici moderne care sa tina utilizatorul in context, astfel incat el sa stie tot timpul unde se afla in aplicatie. Folosirea de ‘breadcrumbs’ ajuta utilizatorul in acest sens, dar el se asteapta la o experienta fluida, la un raspuns instant sau la anumite semne de progres din partea unei aplicatii web captivante. Aceasta cerinta este usor de realizat cu ajutorul unei proiectari partitionate in module cu delimitari si responsabilitati clare. Impartirea aplicatiei in module permite dezvoltarea in paralel a aplicatiei de catre echipe diferite. O proiectare modulara faciliteaza orchestrarea initializarii si curatarii diferitelor parti ale aplicatiei la anumite momente de timp. Modularitatea unei aplicatii ofera de asemenea si posibilitatea de a configura componentele din exterior pentru a evita dependinte ‘hard-coded’. O proiectare modulara iti permite sa formalizezi interactiunile dintre module intr-o maniera decuplata. Aplicatiile modulare sunt mai usor de depanat si de reparat. Atunci cand apare o problema, de regula este usor sa izolezi sursa ei. Problema poate fi la un singur modul si atunci repararea ei este directa sau la comunicarea dintre module si atunci testele automate ar trebui sa indice care parte a cumunicarii cauzeaza problema. O aplicatie dezvoltata dupa un design modular este mai usoara de inteles si de aceea este si mai usoara de intretinut. Aplicatiile modulare usureaza testarea lor modul dupa modul. Se poate folosi o tehnica (‘sandboxing’) de testare a componentelor inainte ca intreaga aplicatie sa fie complet dezvoltata.
- #8: Amplasarea elementelor de interfata poate influenta indetificarea modulelor in aplicatie. De regula elementele inrudite sunt grupate intr-un acelasi modul.
- #9: Animatiile pot constitui un factor in alegerea modulelor. Este de preferat ca implementarea codului animatiei sa fie separat de codul care gestioneaza starea elementelor de interfata, cum ar fi reimprospatarea datelor. Astfel modulele se pot ‘concentra’ pe animatie pentru a defini clar limitele unor experiente interactive si captivante.
- #10: Improspatarea datelor in anumite portiuni din interfata cu utilizatorul pot sugera de asemenea indentificarea unor module care sa ‘stie’ cum si cand sa ceara actualizari relevante de la server si mai ales cum sa aplice schimbarile necesare in interfata cu utilizatorul.
- #11: Intr-o aplicatie modulara fiecare modul are un anumit rol functional si isi ‘concentreaza’ atentia pe ceva specific: Modulele de interfata cu utilizatorul sunt responsabile de reprezentarea vizuala a unui element de interfata;
- #12: Modulele comportamentale sunt responsabile de aplicarea a unor conduite asupra elementelor care apartin modulului respectiv; Animatiile sunt exemple de comportament.
- #13: Modulele de infrastructura sunt responsabile de anumite cerinte la nivel de aplicatie care nu sunt specifice interfetei cu utilizatorul, cum ar fi accesarea datelor sau comunicarea.
- #14: Pentru a dezvolta o aplicatie modulara putem folosi unele metode de implementare a modulelor, cum ar fi: Obiecte JavaScript pentru implementarea modulelor care nu sunt asociate cu elemente vizuale; Plug-in-uri jQuery pentru a extinde functionalitatea pe care o ofera biblioteca jQuery si pentru a incapsula notiuni de comportament si de interfata cu utilizatorul; Widget-uri jQuery pentru implementarea modulelor de interfata cu utilizatorul.