Building Single Page Applications – Know the Ecosystem
advertisement
Single Page Application Ecosystem Twitter Bootstrap Backbone Require.js Compass .js Yoeman BowerGrunt D3JS Three.js JavaScript SaSS Angular.j s Aura.js jQuery Knockout.js Sencha By Rohit Ghatol Director of Engineering - Synerzip www.synerzip.com 1 About Me Rohit Ghatol @ Sf Bay Area Director of Engineering @ Synerzip Technology Evangelist! Technology Speaker Leader of 2 Tech Meetups – TechNext/Pune – Google Developer Group www.synerzip.com 2 Read about SPA Ecosystem in detail @ http://rohitghatol.com/?p=421 www.synerzip.com 3 Topics What is SPA? Why Learn about SPA Ecosystem ? List Popular Frameworks Large Scale SPA Build Deploy Tools www.synerzip.com 4 What is SPA? Rich UI Browser Based Helps Hybrid Apps Offline No Refresh Popular Examples Facebook * Google Hangout Twitter * Bookmark able Replacing Fat Client Saves Context GMAIL & Every New Site Immersive * Almost www.synerzip.com 5 Topics What is SPA? Why Learn about SPA Ecosystem ? List Popular Frameworks Large Scale SPA Build Deploy Tools www.synerzip.com 6 Why Learn about SPA Ecosystem? What do you know about SPA? I know jQuery? www.synerzip.com 7 Why Learn about SPA Ecosystem? What Happened? Nooooooo!! Not Again!! www.synerzip.com 8 Topics What is SPA? Why Learn about SPA Ecosystem ? List Popular Frameworks Large Scale SPA Build Deploy Tools www.synerzip.com 9 Classification www.synerzip.com 10 Routers/History MVC | MVP |MVVM Templates 3D/2D Stylesheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 11 Routers/History MVC | MVP |MVVM Templates 3D/2D Stylesheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 12 DOM Manipulation TR Body TD Div Span TD Table Span TR TD TR TD TD TD www.synerzip.com 13 DOM Manipulation Frameworks • jQuery 1.x • jQuery 2.x (IE 6,7,8) • Zepto • Snack • $DOM • XUI Common APIs • find…() e.g S(“#123) • add(element) • append(element) • remove(element) • bind(event,callback) www.synerzip.com 14 Routers/History MVC | MVP |MVVM Templates 3D/2D Stylesheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 15 Data Access HTTP Web Sockets Browser Cloud /Server Server Sent Events AJAX/HTTP Server Sent Events www.synerzip.com Web Sockets 16 Data Access Frameworks • AJAX – – – – jQuery XUI Zepto Sencha/Ext,Backbone,Ang ular * • Web Sockets/SSE Common APIs • $.ajax(url,method,callback) • Socket send()/onReceive() • SEE onMessage()/onEvent() • etc – HTML5 APIs/Poly Fills * Large Frameworks www.synerzip.com 17 Routers/History MVC | MVP |MVVM Templates 3D/2D Stylesheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 18 Routers/History MVC | MVP |MVVM Templates 3D/2D Stylesheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 19 Modules Multiple Files cy Namespace Conflict Classes/Obje cts Dependen Asynchronous Loading Concatenation of JS files Confidential www.synerzip.com 20 AMD Why we need Asynchronous Module Definition? • Break down code into Reusable Module • Define Dependency between Modules • Avoid Namespace Conflicts • Performance Improvement using Caching • Deployment Optimization www.synerzip.com 21 AMD www.synerzip.com 22 Code without AMD <head> <script src=“model.js”></script> <script src=“store.js”></script> <script src=“view.js”></script> <script src=“controller.js”></script> <script src=“app.js”></script> </head> . www.synerzip.com 23 Code AMD <head> <script src=“require.js” data-main=“app.js”></script> </head> . www.synerzip.com 24 Module Loading using Require.js Code AMD View.js define([ ”Store”], …. App.js require([ “Controller”) Controller.js Model.js define([ “View”, ”Store”], …. define([], …. define([ “Model”], …. Store.js Confidential www.synerzip.com 25 AMD Frameworks • Require.js • Common.js • Sencha* Common APIs • Define • Require • Export • UMD * Universal Module Definition (UMD) – A Module which works when 1. We use Require.js 2. We use Common.js 3. or We Directly include script in HTML code www.synerzip.com 26 Routers/History MVC | MVP |MVVM Templates 3D/2D Stylesheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 27 UI Design Patterns MV C Confidential MV VM www.synerzip.com MVP 28 MVC MV * MVVM MVP www.synerzip.com 29 MV* Frameworks Frameworks • BackBone.js • Angular.js • Knockout.js • Ember.js • Etc (list goes on) Common APIs • NA www.synerzip.com 30 MV * Frameworks • Faster Development Cycles • Predefined Conventions Confidential www.synerzip.com • Very Basic • Highly Flexible 31 Backbone JS • • • • One of the first MV * Light Weight and un-opinionated Works with numerous other frameworks Good Ecosystem – Marionette JS – Large Scale Backbone App – Chaplin – Architecture Framework – Thorax – Opinionated Backbone – Exoskeleton – Light weight Backbone Replacement www.synerzip.com 32 Angular JS • • • • Gaining Immense Popularity Highly Opinionated Framework 2 Way Data Binding Backed by Google – Good Community Support • Faster Development Cycle www.synerzip.com 33 Knockout JS • • • • • Immensely Popularity in C# world Uses MV VM Design 2 Way Data Binding Faster Development Cycles Good for small-mid size Apps www.synerzip.com 34 Routers/History MVC | MVP |MVVM Templates 3D/2D Style sheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 36 Templates Repeats Search Category • Camera • Digital • DSLR • Compact • Camcorder • XXX • XXX No Search Result Found Result 1 Conditional Repeats Result 2 Result 10 Prev 1 2 3 4 5 6 7 8 9 10 Next www.synerzip.com Conditiona l 37 Templates Frameworks • underscore • handlerbar • Moustache • Angular, Sencha * • etc Common APIs • var text= engine.template(tmpl,dat a); www.synerzip.com 40 Routers/History MVC | MVP |MVVM Templates 3D/2D Style sheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 41 Routers/History - Concept http://abc.com/#tab1 Tab1 Tab2 Tab3 Tab 1 www.synerzip.com 42 Routers/History - Concept User can bookmark the url http://abc.com/#tab2 Tab1 Tab2 Tab3 Tab 2 www.synerzip.com 43 Routers/History - Concept User click’s Browser’s back button http://abc.com/#tab2 Tab1 Tab2 Tab3 Tab 2 www.synerzip.com 44 Routers/History - Concept http://abc.com/#tab1 Tab1 Tab2 Tab3 Tab 1 www.synerzip.com 45 Router/History Frameworks • Angular,Backbone,Sench a* • Router JS • Sammy JS • Pager • Dave JS • Cross Roads • Path JS • Etc Common APIs • route(path,callback) • navigate(path,options) • navigate(history_index) www.synerzip.com 46 Routers/History MVC | MVP |MVVM Templates 3D/2D Style sheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 47 Responsive UI Desktop Mobile www.synerzip.com 48 Responsive UI Desktop Mobile www.synerzip.com 49 12 Column Grid Desktop 1 Confidential 2 3 4 5 6 www.synerzip.com 7 8 9 10 11 12 50 12 Column Grid Mobile 1 2 3 4 5 6 7 8 9 10 11 12 Width has shrunk Confidential www.synerzip.com 51 Responsive UI Frameworks • Twitter BootStrap • Zurb Foundation Common APIs • NA www.synerzip.com 52 Comparison Twitter BootStrap • BootStrap your App • More • Rich UI Elements • Mobile First * • Uses Pixels • 12 Column Grid Confidential Zurb Foundation • Use as a Foundation • Minimalistic • Limited UI Elements • Mobile First * • Uses REM • 12 Column Grid www.synerzip.com 53 Routers/History MVC | MVP |MVVM Templates 3D/2D Style sheet Widgets Lang Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 54 2D/3D WebGL = 3D Visualization Canvas/SVG = 2D Visualization www.synerzip.com 55 2D Visualizations Quick and Easy • High Charts • Raphael • Flot JS • Google Visualizations • AMCharts etc Flexible and Powerful • D3JS www.synerzip.com 56 3D Visualizations Frameworks • Three.js • Babylon.js • GLGE • Scene.js • X3DOM • etc WebGL is very cryptic hence we need a higher level framework to work with for 3D Visualization www.synerzip.com 57 Routers/History MVC | MVP |MVVM Templates 3D/2D Style sheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 58 Style Sheet Languages Reasons for Style Sheet Languages • Nested CSS Declarations – Hierarchical Structure • Use of Variables e.g Themes • Mixins – Reusable CSS Snippets www.synerzip.com 59 Style Sheet Languages SASS Vs Less • Almost Similar capabilities – Nesting Capabilities – Mixins and Parametric Mixins – Namespaces – Color Functions – JavaScript Evaluations Confidential www.synerzip.com 62 Routers/History MVC | MVP |MVVM Templates 3D/2D Style sheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 63 What is a Large Scale Application? Confidential www.synerzip.com 64 In my view, large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser. By Addy Osmani Patterns For Large-Scale JavaScript Application Architecture Confidential www.synerzip.com 65 If working on a significantly large JavaScript application, remember to dedicate sufficient time to planning the underlying architecture that makes the most sense. It's often more complex than you may initially imagine. By Addy Osmani Patterns For Large-Scale JavaScript Application Architecture Confidential www.synerzip.com 66 Characteristics • Decoupled Components – Mini Apps – Many Model/Entities – Multiple Views • Nest • Proper Cleanup • Multiple Routers • Event Bus • Abstraction from Libs if Possible Confidential www.synerzip.com 67 Large Scale Application www.synerzip.com 68 Large Scale Application Message Bus sandbox.emit() sandbox.on() DOM Ajax MVC jQuery jQuery Backbone www.synerzip.com sandbox.dom.find( ) Sandbox.ajax.ajax () sandbox.mvc.Vie w 69 Large Scale Application Architecture Frameworks • Aura JS • MarionetteJs for BackBone • etc Confidential Common API • NA www.synerzip.com 70 Routers/History MVC | MVP |MVVM Templates 3D/2D Style sheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 71 Yeoman Yo Grunt Bower Scaffolding Framework Aka Code Generator Automation Tool Like Ant in Java Dependency Mgmt Tool Like Maven in Java www.synerzip.com 72 Brunch Basically a HTML Web App Assembler 1. 2. 3. 4. 5. 6. 7. 8. compiles your scripts, templates, styles lints them wraps the scripts and templates in common.js / AMD modules. concatenates scripts and styles generates source maps for concatenated files copies assets and static files shrinks the output by minifying code and optimizing images watches your files for changes notifies you about errors via console and system notifications www.synerzip.com 77 Comparison Yeoman • Generic • Powerful but Tedious Confidential Brunch • Web App Assembler • Single Purpose and Easy www.synerzip.com 78 Routers/History MVC | MVP |MVVM Templates 3D/2D Style sheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 79 Mobile Packaging SPA Mobile Platform iOS Android www.synerzip.com Windows 8 80 PhoneGap aka Cordova Plugin Architecture www.synerzip.com 81 Trigger.io Trigger.io Modules www.synerzip.com 82 Conclusion SPA Ecosystem frameworks can be classified as • Large Vs Small Frameworks • Opinionated Vs Un-Opinionated Frameworks Confidential www.synerzip.com 83 Large Vs Small Frameworks • There are 2 kinds of Scenario – A Library just fulfills one Category in Eco System – A Library fulfills many Categories in Eco System www.synerzip.com Routers/History MVC | MVP |MVVM Templates 3D/2D Stylesheet Lang Widgets Presentation Layer DOM Manipulation HTML 5 Large Scale Application Architecture Responsive UI Data Access AMD Foundation Layer Mobile Pkg Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 85 MVC | MVP |MVVM Knockout Templates D3JS 3D/2D Stylesheet Lang Sass Presentation Layer Widgets jQuery DOM Manipulation jQuery Data Access HTML 5 Large Scale Application Architecture Router.Js Routers/History BootStrap Responsive UI AMD Foundation Layer Aura JS Require Js PhoneGap Grunt Bower Build Tools Dep. Mgmt Build & Deployment www.synerzip.com Mobile Pkg Scafolding Yo 86 Responsive UI MVC | MVP |MVVM Sencha Templates Sencha Sencha 3D/2D Stylesheet Lang Widgets Presentation Layer Sencha DOM Manipulation Sencha Data Access HTML 5 Large Scale Application Architecture Sencha Routers/History AMD Foundation Layer Sencha Sencha Mobile Pkg Sencha Build Tools Dep. Mgmt Scafolding Build & Deployment www.synerzip.com 87 Opinionated Vs Un-Opinionated The Choice between • Opinionated Route – E.g Angular • Un-Opinionated Route – E.g BackBoneJs www.synerzip.com Conclusion The Choice of frameworks in SPA Ecosystem depends on your • Product needs and • Architectural Goals Confidential www.synerzip.com 89 Contact Me • rohit.ghatol@synerzip.com • Twitter @rohitghatol www.synerzip.com 90 Questions? www.synerzip.com Hemant Elhence hemant@synerzip.com 469.322.0349 www.synerzip.com •91 84 Synerzip in a Nutshell 1. Software product development partner for small/mid-sized technology companies • • • Exclusive focus on small/mid-sized technology companies, typically venture-backed companies in growth phase By definition, all Synerzip work is the IP of its respective clients Deep experience in full SDLC – design, dev, QA/testing, deployment 2. Dedicated team of high caliber software professionals for each client • • • Seamlessly extends client’s local team, offering full transparency Stable teams with very low turn-over NOT just “staff augmentation”, but provide full mgmt support 3. Actually reduces risk of development/delivery • • Experienced team - uses appropriate level of engineering discipline Practices Agile development – responsive, yet disciplined 4. Reduces cost – dual-shore team, 50% cost advantage 5. Offers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT” option www.synerzip.com Our Clients www.synerzip.com Thanks! Call Us for a Free Consultation! Hemant Elhence hemant@synerzip.com 469.322.0349 www.synerzip.com
