Presentation is loading. Please wait.

Presentation is loading. Please wait.

Www.synerzip.com Single Page Application Ecosystem By Rohit Ghatol Director of Engineering - Synerzip JavaScript jQuery Backbone.js Angular.j s Twitter.

Similar presentations


Presentation on theme: "Www.synerzip.com Single Page Application Ecosystem By Rohit Ghatol Director of Engineering - Synerzip JavaScript jQuery Backbone.js Angular.j s Twitter."— Presentation transcript:

1 Single Page Application Ecosystem By Rohit Ghatol Director of Engineering - Synerzip JavaScript jQuery Backbone.js Angular.j s Twitter Bootstrap Yoeman Require.js Aura.js Grunt Bower Compass SaSS Sencha Knockout.js D3JS Three.js 1

2 About Me  Director of Synerzip  Technology Evangelist!  Technology Speaker  Leader of 2 Tech Meetups – TechNext/Pune – Google Developer Group 2 Rohit Sf Bay Area

3 Read about SPA Ecosystem in 3

4 Topics What is SPA? Why Learn about SPA Ecosystem ? List Popular Frameworks Large Scale SPA Build Deploy Tools 4

5 What is SPA? Browser Based Rich UI Bookmark able Saves Context Replacing Fat Client Immersive No Refresh Offline Helps Hybrid Apps Twitter * Google Hangout Facebook * * Almost GMAIL Popular Examples & Every New Site 5

6 Topics What is SPA? Why Learn about SPA Ecosystem ? List Popular Frameworks Large Scale SPA Build Deploy Tools 6

7 Why Learn about SPA Ecosystem? What do you know about SPA? I know jQuery? 7

8 Why Learn about SPA Ecosystem? Nooooooo!! Not Again!! What Happened? 8

9 Topics What is SPA? Why Learn about SPA Ecosystem ? List Popular Frameworks Large Scale SPA Build Deploy Tools 9

10 Classification 10

11 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Stylesheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 11

12 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Stylesheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 12

13 DOM Manipulation BodyDivSpan TableTRTD TRTD TRTD 13

14 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) 14

15 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Stylesheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 15

16 Data Access Cloud /Server Browser AJAX/HTTP Server Sent Events Web Sockets HTTP Web Sockets Server Sent Events 16

17 Data Access Frameworks AJAX –jQuery –XUI –Zepto –Sencha/Ext,Backbone,Ang ular * Web Sockets/SSE –HTML5 APIs/Poly Fills Common APIs $.ajax(url,method,callback) Socket - send()/onReceive() SEE - onMessage()/onEvent() etc * Large Frameworks 17

18 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Stylesheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 18

19 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Stylesheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 19

20 Modules Confidential20 Classes/Obje cts Multiple Files Dependen cy Namespace Conflict Asynchronous Loading Concatenation of JS files

21 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 21

22 AMD 22

23 Code without AMD. 23

24 Code AMD. 24

25 Confidential25 require([ “Controller”) define([ “View”, ”Store”], …. Controller.js define([ “Model”], …. Store.js define([ ”Store”], …. View.js define([], …. Model.js App.js Module Loading using Require.js Code AMD

26 Frameworks Require.js Common.js Sencha* UMD * Common APIs Define Require Export 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 26 AMD

27 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Stylesheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 27

28 UI Design Patterns Confidential28 MV C MV VMMVP

29 MVC MVVM MVP MV * 29

30 MV* Frameworks Frameworks BackBone.js Angular.js Knockout.js Ember.js Etc (list goes on) Common APIs NA 30

31 MV * Frameworks Confidential31 Opinionated Unopinonated Angular Js Ember Js Backbone Js Faster Development Cycles Predefined Conventions Very Basic Highly Flexible

32 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 32

33 Angular JS Gaining Immense Popularity Highly Opinionated Framework 2 Way Data Binding Backed by Google – Good Community Support Faster Development Cycle 33

34 Knockout JS Immensely Popularity in C# world Uses MV VM Design 2 Way Data Binding Faster Development Cycles Good for small-mid size Apps 34

35 Ember JS Full Featured MVC framework Opinionated Framework Relies a lot on Handlebar Templates 35

36 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Style sheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 36

37 Templates 37 Search No Search Result Found Result 1 Result 2 Result 10 Prev Next Category Camera Digital DSLR Compact Camcorder XXX Conditional Repeats Conditiona l Repeats

38 Templates - Underscore //Template by 38

39 Templates - Underscore //Result Myst: The Book of Atrus by Rand Miller The Hobbit by J.R.R. Tolkien Stardust by Neil Gaiman 39 Reference -

40 Templates Frameworks underscore handlerbar Moustache Angular, Sencha * etc Common APIs var text= engine.template(tmpl,dat a); 40

41 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Style sheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 41

42 Routers/History - Concept 42 Tab1 Tab2Tab3 Tab 1

43 Routers/History - Concept 43 Tab1 Tab2 Tab3 Tab 2 User can bookmark the url

44 Routers/History - Concept 44 Tab1 Tab2 Tab3 Tab 2 User click’s Browser’s back button

45 Routers/History - Concept 45 Tab1 Tab2Tab3 Tab 1

46 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) 46

47 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Style sheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 47

48 Responsive UI 48 DesktopMobile

49 Responsive UI 49 DesktopMobile

50 12 Column Grid Confidential Desktop

51 12 Column Grid Confidential Mobile Width has shrunk

52 Responsive UI Frameworks Twitter BootStrap Zurb Foundation Common APIs NA 52

53 Comparison Twitter BootStrap BootStrap your App More Rich UI Elements Mobile First * Uses Pixels 12 Column Grid Zurb Foundation Use as a Foundation Minimalistic Limited UI Elements Mobile First * Uses REM 12 Column Grid Confidential53

54 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Style sheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 54

55 2D/3D Canvas/SVG = 2D Visualization WebGL = 3D Visualization 55

56 2D Visualizations Quick and Easy High Charts Raphael Flot JS Google Visualizations AMCharts etc Flexible and Powerful D3JS 56

57 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 57

58 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Style sheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 58

59 Style Sheet Languages Reasons for Style Sheet Languages Nested CSS Declarations – Hierarchical Structure Use of Variables e.g Themes Mixins – Reusable CSS Snippets 59

60 Style Sheet Languages Sample.scss $blue: #3bbfce; $margin: 16px;.content-navigation { border-color: $blue; color:darken($blue, 9%); }.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } Sample.css.content-navigation { border-color: #3bbfce; color: #2b9eab; }.border { padding: 8px; margin: 8px; border-color: #3bbfce; } 60

61 Style Sheet Languages { { / 100; filter: } a {.transition(all 0.4s); :hover {.opacity(70); } Sample.css a { -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } a:hover { opacity: 0.7; filter: alpha(opacity=70); }. 61

62 Style Sheet Languages SASS Vs Less Almost Similar capabilities –Nesting Capabilities –Mixins and Parametric Mixins –Namespaces –Color Functions –JavaScript Evaluations Confidential62

63 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Style sheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 63

64 What is a Large Scale Application? Confidential64

65 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 Confidential65

66 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 Confidential66

67 Characteristics Decoupled Components – Mini Apps –Many Model/Entities –Multiple Views Nest Proper Cleanup Multiple Routers Event Bus Abstraction from Libs if Possible Confidential67

68 Large Scale Application 68

69 Large Scale Application DOM Ajax MVC jQuery Backbone Message Bus sandbox.dom.find( ) Sandbox.ajax.ajax () sandbox.mvc.Vie w sandbox.emit() sandbox.on() 69

70 Large Scale Application Architecture Frameworks Aura JS MarionetteJs for BackBone etc Common API NA Confidential70

71 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Style sheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 71

72 Yeoman Yo Scaffolding Framework Aka Code Generator Grunt Automation Tool Like Ant in Java Bower Dependency Mgmt Tool Like Maven in Java 72

73 Yo – Backbone Example 73

74 Yo – Backbone Example 74

75 Grunt – Build Tool 75

76 Bower– Build Tool 76

77 Brunch Basically a HTML Web App Assembler 1.compiles your scripts, templates, styles lints them 2.wraps the scripts and templates in common.js / AMD modules. 3.concatenates scripts and styles 4.generates source maps for concatenated files 5.copies assets and static files 6.shrinks the output by minifying code and optimizing images 7.watches your files for changes 8.notifies you about errors via console and system notifications 77

78 Comparison Yeoman Generic Powerful but Tedious Brunch Web App Assembler Single Purpose and Easy Confidential78

79 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Style sheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg 79

80 Mobile Packaging SPA iOSAndroidWindows 8 Mobile Platform 80

81 PhoneGap aka Cordova Plugin Architecture 81

82 Trigger.io Trigger.io Modules 82

83 Conclusion SPA Ecosystem frameworks can be classified as Large Vs Small Frameworks Opinionated Vs Un-Opinionated Frameworks Confidential83

84 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

85 85 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Stylesheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg

86 86 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Stylesheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg BootStrap Router.Js D3JS Knockout Aura JS jQuery Require Js PhoneGap Grunt Bower Yo Sass

87 87 HTML 5 Large Scale Application Architecture AMD DOM Manipulation Data Access Templates MVC | MVP |MVVM 3D/2D Widgets Stylesheet Lang Responsive UI Routers/History Presentation Layer Foundation Layer Build & Deployment Build Tools Dep. Mgmt Scafolding Mobile Pkg Sencha

88 Opinionated Vs Un-Opinionated The Choice between Opinionated Route –E.g Angular Un-Opinionated Route –E.g BackBoneJs

89 Conclusion The Choice of frameworks in SPA Ecosystem depends on your Product needs and Architectural Goals Confidential89

90 Contact Me 90

91 Questions? Hemant Elhence

92 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

93 Our Clients

94 Call Us for a Free Consultation! Hemant Elhence Thanks!


Download ppt "Www.synerzip.com Single Page Application Ecosystem By Rohit Ghatol Director of Engineering - Synerzip JavaScript jQuery Backbone.js Angular.j s Twitter."

Similar presentations


Ads by Google