AppsWorld 2015 - Cross Platform Native Applications in JavaScript
Cross-platform JavaScript
-
Upload
hristo-chakarov -
Category
Technology
-
view
1.009 -
download
0
Transcript of Cross-platform JavaScript
var title = Cross-platform JS;var info = {name: Hristo Chakarov, otherOptional: [Front-end architect at Hostopia BG,12+ years experience in web development,Loves JavaScript].join(. )};
Nov 21, 2015Nov 23, 2014Sofia
Nov 21, 2015Our story
Nov 21, 2015
Nov 21, 2015What WebForce iswebsite builder, just like Wix, Weebly, Squarespaceinline editorno admin panel (like wp-admin in WordPress)the site owner sees his site in a way the end user does, but with editing controlsmost content is in the page source (SEO friendly)
Nov 21, 2015
Nov 21, 2015
Nov 21, 2015
Nov 21, 2015
Nov 21, 2015WebForce has app platformwhich has public SDK for 3rd party devsruns completely client-sideno back-end codeall content is NOT in the page source(bad SEO (actually no SEO at all))
Nov 21, 2015What we wanted WebForce to beapps print their content in the source (SEO)attractive back-endwe want to attract more 3rd party devsinstant editor - the view updates real-time
Nov 21, 2015
Nov 21, 2015NodeJSThat attractive back-end we were looking for
Nov 21, 2015
Nov 21, 2015NodeJSappeared to be such attractive back-endability to reuse front-end code on Nodewe have tones of itwas this possible at all?
Nov 21, 2015Instant editing interfaceThe view updates instantly on property change
Nov 21, 2015
Nov 21, 2015
Nov 21, 2015MV* overview
Nov 21, 2015
Nov 21, 2015Tones of frameworksAngularBackboneEmberKnockout
Nov 21, 2015The common thing is that they allrun in the client
Nov 21, 2015
Nov 21, 2015What ifwe need them on the server?
Nov 21, 2015
Nov 21, 2015Why would we need that?page source - bring the content to the search engines
Is there a MV framework that runs also on NodeJS?
Nov 21, 2015
Nov 21, 2015KnockoutJS overviewNice & simple MVVM framework
Nov 21, 2015
Nov 21, 2015Knockout.js isMVVM framework (Model-View-ViewModel)small (55K compressed)simple & pretty straightforwardno overcomplicating modules (like Router, etc.)the magic happens in the [data-bind] attributeserver version (NodeJS)
Nov 21, 2015
Nov 21, 2015
Nov 21, 2015
Nov 21, 2015
KO.js just did itpublic area - need of content in the page source for SEOavoid code and business logic duplicationinstant editing - the view must update real-time
Nov 21, 2015
Nov 21, 2015KnockoutJS requirementsWhat do we need to run KnockoutJS?
Nov 21, 2015
Nov 21, 2015Knockout.js requirementsEnvironment that runs JavaScriptDocument Object Model (or DOM)
Nov 21, 2015
Nov 21, 2015On NodeJS we haveEnvironment that runs JavaScript
Nov 21, 2015
Nov 21, 2015JSDOMBring the DOM into NodeJS!
Nov 21, 2015
Nov 21, 2015JSDOM is a NodeJS modulethat brings DOM and its API into NodeJScreates DOM from HTML stringmanipulates DOM objects serializes DOM into HTML string
Nov 21, 2015
Nov 21, 2015The technology stackNodeJS Express JSDOM KnockoutJS
Nov 21, 2015
Nov 21, 2015
Architecture
Nov 21, 2015Time for demo!
Nov 21, 2015
Nov 21, 2015File structurepackage.jsonserver.jsdata.jsonweb/index.htmlcss/Images/Scripts/
Nov 21, 2015Step 1Serving static files with ExpressSetup for pre-processing HTML files
Nov 21, 2015
Nov 21, 2015
/package.json
Nov 21, 2015
/server.js
Nov 21, 2015
/web/index.html
Nov 21, 2015
http://localhost:3000
Nov 21, 2015Step 2Integrating KnockoutJS
Nov 21, 2015
Nov 21, 2015
/web/index.html
Nov 21, 2015
/web/Scripts/init.js
Nov 21, 2015
/data.json
Nov 21, 2015
/server.js
Nov 21, 2015
http://localhost:3000
Nov 21, 2015Step 3Preprocess HTML with JSDOM
Nov 21, 2015
Nov 21, 2015
/package.json
Nov 21, 2015
/server.js
Nov 21, 2015
Page source
Nov 21, 2015
Page source
Nov 21, 2015Step 4Render ViewModel on the server
Nov 21, 2015
Nov 21, 2015Goalsfetch script contents from the documenton the serverexecute scriptssynchronously (1 after another) to preserve any dependency between themcreate local scope for encapsulation
Nov 21, 2015
/package.json
Nov 21, 2015
/web/Scripts/init.js
Nov 21, 2015
/server.js
Nov 21, 2015
server.js
Nov 21, 2015
/web/index.html
Nov 21, 2015
Page source
Nov 21, 2015
Page source
Nov 21, 2015Step 5Set values to form elements
Nov 21, 2015
Nov 21, 2015
/web/Scripts/init.js
Nov 21, 2015
Nov 21, 2015
Nov 21, 2015
Page source
Nov 21, 2015
Nov 21, 2015Step 6Choose where to execute scripts - server-only, client-only, or both
Nov 21, 2015
Nov 21, 2015
/server.js
Nov 21, 2015
/web/index.html
Nov 21, 2015Step 7Move server-only logic to the server
Nov 21, 2015
Nov 21, 2015
/web/index.html
Nov 21, 2015
Page source
Nov 21, 2015The demo is in GitHubhttps://github.com/ickata/nodejs-jsdom-knockoutjs
Nov 21, 2015
Nov 21, 2015Thanks to our Sponsors:General Sponsor:Gold Sponsors:Swag Sponsors:Media Partners:
Silver Sponsors:
Technological Partners:
Bronze Sponsors:
Nov 21, 2015
Nov 21, 2015Questions?
Nov 21, 2015
Nov 21, 2015