JavaScript Grows Up in the Enterprise

JavaScript Grows Up in the Enterprise

The meteoric rise of JavaScript, a programming language created in 10 days nearly 20 years ago, continues to astound believers and skeptics alike. It may not be the most elegant, consistent, or powerful language, but like the English language, you can use it practically everywhere and to do almost anything. Developers have pushed the envelope of JavaScript both on a grass-roots level with open source libraries, as well as within the standard bodies to push for richer language features. This acceptance has created an increasingly better variant of modern JavaScript that is rapidly becoming the dominant language and forming a thriving ecosystem for professional software development. Today, developers use JavaScript as wiring to build reactive interfaces on the front-end, as glue to connect systems in real-time in the middle-tier, and as lever to scale out the back-end in the cloud.

Smart enterprises are starting to tap into the boundless energy, fast pace of innovation, and ready-made parts available in the JavaScript ecosystem. Top developers joining enterprise teams are bringing their strong expertise of JavaScript along their equally strong opinions about their favorite frameworks or libraries with them. Christopher Tse, the founding Senior Director of McGraw-Hill Education’s R&D lab, will share the insights and lessons from three years of using JavaScript, JSON, node.js, and NoSQL to tackle hard problems that the previous generation of technologies like Java, CMS, RDBMS, and BI tools left unsolved.

Chris will show real-world examples of how JSON-native stores like Couchbase are giving JavaScript apps the scalability leverage to securely extend enterprise data to end-users globally, on a delivery platform of their choice, while shielding those systems from the unpredictable spikes on the Internet. Additionally, he will paint a picture of a JSON-centric architectural landscape that will highlight tools and libraries that are the emerging winners in the JavaScript world.

This talk was originally presented at Couchbase Live NYC on June 3, 2014. http://www.couchbase.com/couchbase-nyc-2014

Resources & Links:

Ember.js - http://emberjs.com
AngularJS - http://angularjs.org
Backbone.js - http://backbonejs.org
node.js - http://nodejs.org
Node Packaged Modules - https://www.npmjs.org
Connect Middleware - http://www.senchalabs.org/connect
Cloudify - http://getcloudify.org
d3.js - http://d3js.org
Ziggrid [Baseball Demo] - http://www.zinikinetwork.com/#beane-counter
Ziggrid [Full 30 min Presentation] - https://vimeo.com/90248214
Ziggrid [GitHub Project] - https://github.com/Ziniki-Network/Ziggrid
JSON API - http://jsonapi.org
ZINC - Coming soon!
Couchbase Server - http://www.couchbase.com

Follow @christse on Twitter (http://twitter.com/christse) for updates on topics like Enterprise JavaScript, HTML5-based Cards, and Reactive Data Analytics.

C14f6f7b7ce45e286106e7e7d5421f40?s=128

Chris Tse

June 03, 2014
Tweet

Transcript

  1. JavaScript Grows Up In the Enterprise Christopher Tse (@christse) Senior

    Director, MH Education Labs
  2. Front-End Applications Back-End Systems Cloud Integration BI & Analytics x

    x x x
  3. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x JS N
  4. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x
  5. Delivering Scalable User- Facing Apps in the Cloud 1 Front-End

    Application Cloud Integration
  6. Database App Server Browser Traditional Web App Architecture Model Controller

    View Relational Tables DOM
  7. Browser Database API Server Modern JavaScript Web App Architecture Model

    Controller View NoSQL Documents DOM REST APIs
  8. Browser API Server Modern JavaScript App Model Controller View DOM

    REST APIs App Server Browser Model Controller View DOM Traditional Web App JSON FAT HTML vs.
  9. Case Study: Medici Builder Browser API Server JavaScript MVC Framework

    JavaScript MVC Framework EmberJS: JavaScript MVC Framework Ember Data: Client-Server Data Sync Library Ruby on Rails: Model-based API Generator JSON 175K SLOC 25K SLOC
  10. Unifying Web and Mobile WEB TABLET API Server JSON JSON

    Database CDN
  11. Unifying Web and Mobile WEB TABLET API Server JSON JSON

    Database CDN
  12. Sync Gateway Unifying Web and Mobile WEB TABLET API Server

    JSON JSON Database CDN
  13. Sync Gateway Unifying Web and Mobile WEB TABLET API Server

    JSON JSON Database Just Scale the APIs CDN
  14. Distributing Data & Content Globally via an API Grid 2

    Cloud Integration Back-end Systems
  15. REST APIs are Everywhere (already) App Persistence REST APIs RDBMS

    CRM System In the Cloud REST APIs User Profiles On a Service Bus REST APIs Line-of-Business Applications SOAP APIs On a Sunset Plan
  16. Couldn’t really do this: App Persistence REST APIs RDBMS CRM

    System In the Cloud REST APIs User Profiles On a Service Bus REST APIs Line-of-Business Applications SOAP APIs On a Sunset Plan » Latency » Security concerns » Not designed to handle load » API Inconsistencies
  17. App Persistence REST APIs CRM System REST APIs User Profiles

    REST APIs Line-of-Business Applications SOAP APIs CS101: Add a layer of abstraction
  18. API Grid App Persistence REST APIs CRM System REST APIs

    User Profiles REST APIs Line-of-Business Applications SOAP APIs SQL
  19. API Grid in a Nutshell It’s like a CDN (Content

    Distribution Network). For JSON documents that public-facing APIs return. Reads & writes can originate from anywhere. It distributes your cached documents globally.
  20. Private APIs Private APIs Private APIs Local View Public APIs

    Secaucus, NJ Data Center NEW YORK Global View JSON Response
  21. NEW YORK SINGAPORE Global View

  22. NEW YORK SINGAPORE Global View XDCR Cross Data Center Replication

    JSON Responses
  23. NEW YORK Local View SINGAPORE Global View Local View JSON

    Responses AWS Asia Pacific (Singapore) Region Public APIs
  24. NEW YORK Local View SINGAPORE Global View Local View JSON

    Responses AWS Asia Pacific (Singapore) Region Public APIs
  25. NEW YORK Local View SINGAPORE Global View Local View JSON

    Responses AWS Asia Pacific (Singapore) Region Public APIs
  26. NEW YORK Local View SINGAPORE Global View Local View JSON

    Responses AWS Asia Pacific (Singapore) Region Public APIs
  27. Local View AWS Asia Pacific (Singapore) Region NEW YORK Local

    View SINGAPORE Global View JSON Responses Private APIs Private APIs Private APIs Local View Public APIs JSON Responses Public APIs Secaucus, NJ Data Center
  28. Local View AWS Asia Pacific (Singapore) Region NEW YORK Local

    View SINGAPORE Global View JSON Responses Private APIs Private APIs Private APIs Local View Public APIs JSON Responses Public APIs Secaucus, NJ Data Center
  29. Local View AWS Asia Pacific (Singapore) Region NEW YORK Local

    View SINGAPORE Global View JSON Responses Private APIs Private APIs Private APIs Local View Public APIs JSON Responses Public APIs Secaucus, NJ Data Center
  30. Local View AWS Asia Pacific (Singapore) Region NEW YORK Local

    View SINGAPORE Global View JSON Responses Private APIs Private APIs Private APIs Local View Public APIs JSON Responses Public APIs Secaucus, NJ Data Center
  31. Public API Facades & Private API Adapters Node.js, Connect middleware,

    with other npm modules Data Grid Middleware JSON Response Document Storage and Replication Couchbase Clusters with Cross-Data Center Replication Cloud US / Asia Point-of-Presences Amazon EC2 and EBS, orchestrated by Cloudify API Grid Architecture Sum m ary
  32. Building Data Marts with NoSQL and NoETL 3 . Cloud

    Integration BI & Analytics
  33. Traditional Data Warehouse & BI Data Sources Data Warehouse Data

    Marts Reports & Dashboards SQL SQL Raw Data Insights
  34. Reports & Dashboards Data Sources Data Warehouse Data Marts “Big

    Data” Architecture (2013) SQL SQL Raw Data Insights
  35. Reports & Dashboards Data Sources Data Warehouse Data Marts “Big

    Data” Architecture (2013) SQL SQL Raw Data Insights More Sources
  36. Reports & Dashboards Data Sources Data Warehouse Data Marts “Big

    Data” Architecture (2013) SQL SQL Hadoop Cluster Raw Data Insights More Sources
  37. Reports & Dashboards Data Sources Data Warehouse Data Marts “Big

    Data” Architecture (2013) SQL SQL Hadoop Cluster Aggregate Store Raw Data Insights More Sources
  38. “Big Data” Architecture (2013) SQL SQL Raw Data Insights Data

    Sources Data Warehouse Data Marts Reports & Dashboards ETL ETL Hadoop Cluster Aggregate Store More Sources
  39. SQL Some-sort-of query language ETL To extract, transform and load

    in steps We mean: So we can: Declaratively express the logic for the machine to calculate and process But: Processing complex, multi- layered queries upon request can be slow Store the results from the intermediate or final steps of our calculations Stored data gets out-of- sync with reality. And refresh is often expensive When we say:
  40. SQL ETL

  41. SQL ETL Logic

  42. SQL ETL Logic Steps

  43. SQL ETL Logic Steps Fresh Data

  44. SQL ETL Logic Steps Fresh Data Fast Access

  45. SQL ETL Logic Steps in Fresh Data Fast Access &

  46. FRP Logic Steps in Fresh Data Fast Access &

  47. FRP

  48. Introducing Functional Reactive Programming FRP

  49. Excel is FRP Functional Every cell is either is a

    value or a f(x) that generates a value
  50. Excel is FRP Functional Reactive Every cell is either is

    a value or a f(x) that generates a value If you change one cell, all the other cells that refer to it changes immediately
  51. Excel is FRP Functional Reactive Programming Every cell is either

    is a value or a f(x) that generates a value If you change one cell, all the other cells that refer to it changes immediately Yes, you are programming when you are create a model in an Excel spreadsheet
  52. Start with a simple sum() Adding numbers within one worksheet

    Excel is FRP
  53. Start with a simple sum() Add more tabs Adding numbers

    within one worksheet To reflect higher level aggregates Excel is FRP
  54. Start with a simple sum() Add more tabs Draw fancy

    graphs Adding numbers within one worksheet To reflect higher level aggregates That visualizes the valuable aggregates Excel is FRP
  55. What if... Cells inside Sheets Documents in JSON Data Model:

    Calculating: When you open the file Visualization: Supported chart types All the time in the cloud Anything drawable in HTML5 Instead of... We have... =SUM(A1:B10) function Sum() { ... } Language:
  56. Ziggrid is FRP Stores values in JSON Inside a Couchbase

    cluster
  57. f(x) f(x) f(x) Ziggrid is FRP Stores values in JSON

    Specifies f(x) in JSON Inside a Couchbase cluster Also builds a dependency graph
  58. f(x) f(x) f(x) Ziggrid is FRP Stores values in JSON

    Specifies f(x) in JSON Inside a Couchbase cluster Also builds a dependency graph Push data out via JSON So clients can render data in HTML5, etc
  59. Ziggrid is FRP Stores values in JSON Specifies f(x) in

    JSON Push data out via JSON Inside a Couchbase cluster Also builds a dependency graph So clients can render data in HTML5, etc f(x) f(x) f(x) “The Ziggurat”
  60. Ziggrid is FRP Stores values in JSON Specifies f(x) in

    JSON Push data out via JSON Inside a Couchbase cluster Also builds a dependency graph So clients can render data in HTML5, etc f(x) f(x) f(x) “The Ziggurat” JS N
  61. Layers of the Ziggurat Raw Events Enhanced Events Summaries Rankings

    Correlations Snapshots Composites Raw Data Insights
  62. None
  63. Action Collections EdSense: Real-time Recommendations Learning Style Engagement User Intents

    Recommendations Reaction Activity Log Achievements Efficacy Raw Data Insights
  64. Action Collections EdSense: Real-time Recommendations Learning Style Engagement User Intents

    Recommendations Reaction Activity Log Achievements Efficacy Raw Data Insights
  65. FRP Analytics Architecture HTML5 Data Tables and SVG Visualization Ember.js

    + D3.js via Zinc + JSONAPI Middleware Front-end Model Description, Calculation, and Event Chaining Java via Memcached Protocol Backend Raw and Aggregated Data Storage and Indexing Couchbase JSON Store + Incremental MapReduce (JavaScript) Sum m ary
  66. FRP Analytics Architecture HTML5 Data Tables and SVG Visualization Ember.js

    + D3.js via Zinc + JSONAPI Middleware Front-end Model Description, Calculation, and Event Chaining Java via Memcached Protocol Backend Raw and Aggregated Data Storage and Indexing Couchbase JSON Store + Incremental MapReduce (JavaScript) Sum m ary Database Change Protocol
  67. Completing the Loop with Reactive Data Applications 4 . BI

    & Analytics Front-End Applications
  68. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x
  69. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Detailed BIG DATA
  70. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Insightful Detailed BIG DATA ANALYZED DATA
  71. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Insightful Detailed Fresh BIG DATA ANALYZED DATA INTERACTION DATA
  72. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Insightful Permanent Detailed Fresh BIG DATA OFFICIAL DATA ANALYZED DATA INTERACTION DATA
  73. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Insightful Permanent Detailed Fresh BIG DATA OFFICIAL DATA ANALYZED DATA INTERACTION DATA
  74. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Insightful Permanent Detailed Fresh BIG DATA OFFICIAL DATA INTERACTION DATA ANALYZED DATA
  75. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Insightful Permanent Detailed Fresh BIG DATA OFFICIAL DATA INTERACTION DATA ANALYZED DATA Complete REACTIVE DATA
  76. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Insightful Permanent Detailed Fresh BIG DATA OFFICIAL DATA INTERACTION DATA ANALYZED DATA Complete REACTIVE DATA
  77. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Insightful Permanent Detailed Fresh BIG DATA OFFICIAL DATA ANALYZED DATA Complete REACTIVE DATA INTERACTION DATA
  78. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x JS N
  79. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x d3.js EmberJS Zinc + JSON API JS N
  80. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x node.js d3.js EmberJS Zinc + JSON API JS N Couchbase
  81. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x node.js node.js d3.js EmberJS Zinc + JSON API JS N Couchbase npm Modules (Node Package Manager) Couchbase
  82. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x node.js node.js d3.js EmberJS Zinc + JSON API Couchbase JS N Couchbase npm Modules (Node Package Manager) Couchbase Ziggrid
  83. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Couchbase JS N Couchbase Couchbase
  84. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Real-time Data Mart Global Data Grid Database of Record
  85. Front-End Applications Back-End Systems BI & Analytics Cloud Integration x

    x x x Real-time Data Mart Global Data Grid Database of Record On Device Database
  86. IsJavaScript the enterprise? ready for

  87. Is JavaScript the enterprise ? ready for

  88. Is JavaScript the enterprise ? ready for The whole internet

    is already there.
  89. Thank you. Christopher Tse (@christse) Senior Director, MH Education Labs