1. www.synerzip.com 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. www.synerzip.com About Me  Director of Engineering @ Synerzip  Technology Evangelist!  Technology Speaker  Leader of 2 Tech Meetups – TechNext/Pune – Google Developer Group 2 Rohit Ghatol @ Sf Bay Area

3. www.synerzip.com Read about SPA Ecosystem in detail @ http://rohitghatol.com/?p=421 http://rohitghatol.com/?p=421 3

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

5. www.synerzip.com 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. www.synerzip.com Topics What is SPA? Why Learn about SPA Ecosystem ? List Popular Frameworks Large Scale SPA Build Deploy Tools 6

7. www.synerzip.com Why Learn about SPA Ecosystem? What do you know about SPA? I know jQuery? 7

8. www.synerzip.com Why Learn about SPA Ecosystem? Nooooooo!! Not Again!! What Happened? 8

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

10. www.synerzip.com Classification 10

11. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com DOM Manipulation BodyDivSpan TableTRTD TRTD TRTD 13

14. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com Data Access Cloud /Server Browser AJAX/HTTP Server Sent Events Web Sockets HTTP Web Sockets Server Sent Events 16

17. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com Modules Confidential20 Classes/Obje cts Multiple Files Dependen cy Namespace Conflict Asynchronous Loading Concatenation of JS files

21. www.synerzip.com 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. www.synerzip.com AMD 22

23. www.synerzip.com Code without AMD. 23

24. www.synerzip.com Code AMD. 24

25. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com UI Design Patterns Confidential28 MV C MV VMMVP

29. www.synerzip.com MVC MVVM MVP MV * 29

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

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

32. www.synerzip.com 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. www.synerzip.com Angular JS Gaining Immense Popularity Highly Opinionated Framework 2 Way Data Binding Backed by Google – Good Community Support Faster Development Cycle 33

34. www.synerzip.com 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. www.synerzip.com Ember JS Full Featured MVC framework Opinionated Framework Relies a lot on Handlebar Templates 35

36. www.synerzip.com 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. www.synerzip.com Templates 37 Search No Search Result Found Result 1 Result 2 Result 10 Prev 1 2 3 4 5 6 7 8 9 10 Next Category Camera Digital DSLR Compact Camcorder XXX Conditional Repeats Conditiona l Repeats

38. www.synerzip.com Templates - Underscore //Template by 38

39. www.synerzip.com Templates - Underscore //Result Myst: The Book of Atrus by Rand Miller The Hobbit by J.R.R. Tolkien Stardust by Neil Gaiman 39 Reference - http://headspringlabs.com/blog/an-underscore-templates-primer/http://headspringlabs.com/blog/an-underscore-templates-primer/

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

41. www.synerzip.com 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. www.synerzip.com Routers/History - Concept 42 http://abc.com/#tab1 Tab1 Tab2Tab3 Tab 1

43. www.synerzip.com Routers/History - Concept 43 http://abc.com/#tab2 Tab1 Tab2 Tab3 Tab 2 User can bookmark the url

44. www.synerzip.com Routers/History - Concept 44 http://abc.com/#tab2 Tab1 Tab2 Tab3 Tab 2 User click’s Browser’s back button

45. www.synerzip.com Routers/History - Concept 45 http://abc.com/#tab1 Tab1 Tab2Tab3 Tab 1

46. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com Responsive UI 48 DesktopMobile

49. www.synerzip.com Responsive UI 49 DesktopMobile

50. www.synerzip.com 12 Column Grid Confidential50 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 11 12 Desktop

51. www.synerzip.com 12 Column Grid Confidential51 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 11 12 Mobile Width has shrunk

52. www.synerzip.com Responsive UI Frameworks Twitter BootStrap Zurb Foundation Common APIs NA 52

53. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com 2D/3D Canvas/SVG = 2D Visualization WebGL = 3D Visualization 55

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

57. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com Style Sheet Languages Sample.less.transition(@transition) { -webkit-transition: @transition; -moz-transition: @transition; -o-transition: @transition; transition: @transition; }.opacity(@opacity) { opacity: @opacity / 100; filter: ~"alpha(opacity=@{opacity})"; } 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. www.synerzip.com Style Sheet Languages SASS Vs Less Almost Similar capabilities –Nesting Capabilities –Mixins and Parametric Mixins –Namespaces –Color Functions –JavaScript Evaluations Confidential62

63. www.synerzip.com 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. www.synerzip.com What is a Large Scale Application? Confidential64

65. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com Characteristics Decoupled Components – Mini Apps –Many Model/Entities –Multiple Views Nest Proper Cleanup Multiple Routers Event Bus Abstraction from Libs if Possible Confidential67

68. www.synerzip.com Large Scale Application 68

69. www.synerzip.com 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. www.synerzip.com Large Scale Application Architecture Frameworks Aura JS MarionetteJs for BackBone etc Common API NA Confidential70

71. www.synerzip.com 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. www.synerzip.com Yeoman Yo Scaffolding Framework Aka Code Generator Grunt Automation Tool Like Ant in Java Bower Dependency Mgmt Tool Like Maven in Java 72

73. www.synerzip.com Yo – Backbone Example 73

74. www.synerzip.com Yo – Backbone Example 74

75. www.synerzip.com Grunt – Build Tool 75

76. www.synerzip.com Bower– Build Tool 76

77. www.synerzip.com 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. www.synerzip.com Comparison Yeoman Generic Powerful but Tedious Brunch Web App Assembler Single Purpose and Easy Confidential78

79. www.synerzip.com 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. www.synerzip.com Mobile Packaging SPA iOSAndroidWindows 8 Mobile Platform 80

81. www.synerzip.com PhoneGap aka Cordova Plugin Architecture 81

82. www.synerzip.com Trigger.io Trigger.io Modules 82

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

84. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com 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. www.synerzip.com Opinionated Vs Un-Opinionated The Choice between Opinionated Route –E.g Angular Un-Opinionated Route –E.g BackBoneJs

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

90. www.synerzip.com Contact Me rohit.ghatol@synerzip.com Twitter @rohitghatol 90

91. www.synerzip.com 9184 Questions? www.synerzip.com Hemant Elhence hemant@synerzip.com 469.322.0349

92. www.synerzip.com 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. www.synerzip.com Our Clients

94. www.synerzip.com Call Us for a Free Consultation! Hemant Elhence hemant@synerzip.com 469.322.0349 Thanks!