Watson Customer Engagement with IBM Watson Content Hub MTL 20. – 21. Juni 2017 IBM Labor Böblingen Single Page Apps 1
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Watson Customer Engagement
withIBM Watson Content Hub
MTL 20. – 21. Juni 2017
IBM Labor Böblingen
Single Page Apps
1
IBM Watson Content Hub is a cloud-era, headless CMS that helps you publish great content to any channel from mobile apps to billboards
Focused Nimble Cognitive
Available on the IBM Marketplace
Headless CMS,Powered by Watson.Pay as you go.Global scale.Commerce integration.CDN built-in.
IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion.
Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision.
The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract.
The development, release, and timing of any future features or functionality described for our products remains at our sole discretion.
Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no
assurance can be given that an individual user will achieve results similar to those stated here.
Watson Customer Engagement
Main Tasks:
— WCH— An example in complexity— Definition of SPAs— Things to improve— Getting started with WCH site hosting— Hands-on (Because it’s that easy ☺)— A brief tour through SPA Frameworks/Libraries
(Angularjs, React.js, Vue.js, Vanilla JS)]— Questions
6/23/20174
What this talk will cover
Watson Customer Engagement 6/23/20175
An example in complexity
React is used here as an example, but a similar story holds true for all tools, big and small alike. This does not mean you should not use them, or that they are bad. It only means you need to be diligent when choosing tools, and understand more than just the syntax for their usage.
Watson Customer Engagement 6/23/20176
Seemingly simple and easy
http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/
Watson Customer Engagement 6/23/20177
Not quite done…
Size of bundle.js:
19,374 Lines of Code
http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/
Watson Customer Engagement 6/23/20178
An alternative…
Size of index.html:
18 Lines of Code
Watson Customer Engagement 6/23/20179
We overengineer from the beginning without realizing it
Watson Customer Engagement 6/23/201710
It’s hyped…
“SPA is one of the most exciting technology strategies today, but it may be one of the worst terms in modern web development. Just the word “Page” can have
many meanings.” – John Papa, Nov. 2013
Watson Customer Engagement 6/23/201711
It’s hyped…
“SPA is one of the most exciting technology strategies today, but it may be one of the worst terms in modern web development. Just the word “Page” can have
many meanings.” – John Papa, Nov. 2013
Watson Customer Engagement 6/23/201712
… and there are some misconceptions
SPAs are:
— It’s a concept/architecture not a framework!— It’s the idea of “desktop-like” apps in the browser— Good for very responsive sites— Consisting of a Shell, Views, Navigation, Menu & Data
SPAs are not:
— Just a “single” page— Client-side only (SEO, Caching, Security, CDN)— Making your page load faster (requires hard work & WCH can help ☺)— Simple
Watson Customer Engagement 6/23/201713
A (home-made) definition…
Single-Page applications let the user interact with the website without having to refresh the page. Therefore SPAs rely on client-side rendering and (view) state
management. The HTML is (mostly) rendered on the browser using AJAX payloads send by the server. The payload (mostly) consists of structured data
based on the current application state.
Watson Customer Engagement 6/23/201714
Let’s visualize the definition
Client
Server
Watson Customer Engagement 6/23/201715
Remember the “network”
Network
Client
Server
Watson Customer Engagement
Network
6/23/201716
Initial loading…
Client
Server
User
APP Backend
GET
HTML JSCSSSVG
ParsingMarkup Bootstrap SPA
DataFetch AjaxWebsockets
MQTT
Interacts
Watson Customer Engagement
Network
6/23/201717
After initial load…
Client
Server
User
APP Backend
GET
SPA
DataAjaxWebsockets
MQTT
Interacts
SPAs Tasks:
— Routing— State Management— Data Handling— Templating— Update View— (Parts of) Application Logic
e.g. Input Validation
Watson Customer Engagement 6/23/201718
Where to improve… Initial Load
Client
Server
User
APP Backend
GET
HTML JSCSSSVG
ParsingMarkup Bootstrap SPA
Fetch
— Good: SPA code is running on the browser
— Therefore the code will be fetched on the initial load
— However: The “whole” app is loaded at the beginning
— Goal: Reduce the time to load— How: Content Delivery Networks (backed into WCH ☺ ), Reduce file
sizes (WCH Image Renditions), Prerendering, Lazy loading, …
Watson Customer Engagement 6/23/201719
Hosting SPAs (actually whatever you like☺) on Watson Content Hub
What you can “host” on WCH:
— Files up to 250mb in size— Relative linking between files
How to upload:
— wchtools— (But you could also use the REST APIs – discouraged)
Steps:
1. (Once) Setup wchtools2. Develop your application (Locally)3. Push your application with wchtools
http://samples.watsoncontenthub.io/sample-pages/index.html
Watson Customer Engagement
Command Line Interface /Available/On (Github/NPM)
$npm install –g wchtools-cli
<installation>
$wchtools ––help
Usage: wchtools <command> [options]
Commands:
delete [options] Delete the specified artifact
init [options] Init the settings to access IBM WCH
list [options] List changed local/remote artifacts
publish [options] Create a new publishing job
pull [options] Pull modified authoring artefacts from IBM WCH
push [options] Push modified authoring artefacts to IBM WCH
20
Watson Customer Engagement
Command Line Interface /Available/On (Github/NPM)
$wchtools init
User name <Enter username here>
API URL <Copy URL from Authoring UI>
The configuration settings were saved to ...
$wchtools push -w --dir ./build –password <Your Password>
Push modified started
Push modified complete. Pushed 8 artifacts sucessfully. See wchtools-
cli.log for more information on the operation.
21
Note: -v for detailed logging in the command line
Watson Customer Engagement 6/23/201722
Watson Customer Engagement
Bonus: SPA Frameworks & Libraries
6/23/2017Footer23
Watson Customer Engagement
We have to make an architectural decision!
— Angular 1.6.x— Angular 4.x— React.js— Vue.js— Vanilla js— …
6/23/201724
How do we implement a SPA?
How to decide? There is no golden rule! Consider your requirements, skills, team size, environment, …
?
Watson Customer Engagement 6/23/201725
Angular 1.6.x
Released 2009
What Holistic MVVC Framework
Buzzword Two-Way Databinding
Concepts Modules, Services, Controllers, Directives, Dependency Injection, , Property Bindings, Components (1.5<)
Reasons Solved a lot of problems which have now been fixed with ES2015. (e.g. Modules)
Deps (Task Runner), (Transpiler), (Module Loader), ng-router
Pick? No. Angular 4 is already available. Otherwise you already have to plan for an migration… (Steep Learning curve)
https://angularjs.org/
Watson Customer Engagement 6/23/201726
Angular 4.x
Released 2017
What Holistic MVVC Framework
Buzzword Typescript
Concepts Dependency Injection, Components, Services, Property Bindings, Universal, Routing
Reasons Lessons learned from Angular1. Adapts to the new paradigms (purely component based).
Deps Task Runner, Transpiler, Module Loader, Angular-CLI, (RxJS)
Pick? Yes. If you need a “heavy”& holistic framework to get the job done. Be aware to “embrace” the toolset Angular forces on you! (Steep Learning curve)
https://angular.io/
Watson Customer Engagement 6/23/201727
React.js (v15.x)
Released 2016
What JavaScript Library for building UI
Buzzword Reactive
Concepts Virtual DOM (Reactive), Components
Reasons Modular Approach to create progressive apps. Core library focuses on the view aspect only. Everything is JS.
Deps Task Runner, Transpiler, Module Loader, JSX, Routing, State Mgmt
Pick? Yes. But you have to like the idea of “everything” is JS. Furthermore you will need lot’s of other libraries for a complex application.
https://facebook.github.io/react/
Watson Customer Engagement 6/23/201728
Vue.js (v2)
Released 2016
What Progressive JavaScript Framework (I think library is a better fit)
Buzzword Progressive
Concepts Virtual DOM (Reactive), Components
Reasons Modular Approach to create progressive apps. Core library focuses on the view aspect only. Very similar to react. Embraces classic web technologies.
Deps (Task Runner), (Transpiler), Module Loader, Routing, State Mgmt
Pick? Yes. If you are fine that IE8 and lower are not supported. Lightweight & “easy“ to use. However you need tons of other libraries for a complex application.
https://vuejs.org/
Watson Customer Engagement 6/23/201729
Vanilla JS
Released 1995 (latest update in 2016 ☺)
What Leverage standardized capabilities of JS
Buzzword Do it yourself
Concepts Modules, Service Workers, Classes, Shadow DOM, Web Components
Reasons Leverage existing standards. Use a pattern instead of a framework: PRPL (Push, Render, Pre-cache, Lazy-load)
Deps -
Pick? Yes. You need some expertise to be consistent cross browser. High learning curve. You have to define/adapt your own patterns.
https://developers.google.com/web/fundamentals/performance/prpl-pattern/
Watson Customer Engagement
Commonly used Libs:— Reactive JS (RxJS) - https://github.com/Reactive-Extensions/RxJS— JSX - https://jsx.github.io/— Redux - http://redux.js.org/docs/introduction/— Flux - https://facebook.github.io/flux/Transpilers:— Babel - https://babeljs.io/— Typescript - https://www.typescriptlang.org/Module Loaders:— Browserify - http://browserify.org/— Webpack - https://webpack.js.org/— SystemJs - https://github.com/systemjs/systemjsTask Runner:— Gulp - http://gulpjs.com/— Grunt - https://gruntjs.com/— Maven/ Gradle - https://gradle.org/
6/23/201730
For reference later…(And therefore not part of this talk)
Watson Customer Engagement
Thank you!
Was Sie interessieren könnte:
"Rapid Development" und schnelle Projektergebnisse mit Node Red
Sven Sterbling, IBM Lab Services & WCH Advocate
31
Related Documents
