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