isomorphic js - new silver bullet
DESCRIPTION
Isomorphism principle involves the use of a single code on the server and the client side of the application. The main advantages of the approach are reducing duplication, improving the quality of code, as well as accelerating the development process.TRANSCRIPT
![Page 1: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/1.jpg)
As true as steel to your desire
You come with just an idea -we make great software for you!
TrustTeamwork
Transparency
Isomorphic Javascript: new silver bullet
Vitaliy Medvedev, Arcadia
![Page 2: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/2.jpg)
© Copyright JSC “Arcadia, Inc.”
About me
Vitaliy Medvedev
Leading Software Engineer at JSC “Arcadia Inc.”
5+ years of experience in software development
![Page 3: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/3.jpg)
© Copyright JSC “Arcadia, Inc.”
Where JS works
● client● server● desktop● mobile● quadcopters
![Page 4: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/4.jpg)
© Copyright JSC “Arcadia, Inc.”
Single page application (SPA)
JSON(AJAX/WebSockets)
HTML/CSS/JS PHP/C#/Java/NodeJs
Frontend (MVC)
AnimationValidation
TemplatingRouting
Backend (MVC)
PersistenceAuthentication
Heavy calculations
![Page 5: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/5.jpg)
© Copyright JSC “Arcadia, Inc.”
SPA problems
● loading time● search engine indexing● logic duplication
o different languages - different ecosystemso cross-functional restictions
![Page 6: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/6.jpg)
© Copyright JSC “Arcadia, Inc.”
![Page 7: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/7.jpg)
© Copyright JSC “Arcadia, Inc.”
1. Solution!
![Page 8: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/8.jpg)
© Copyright JSC “Arcadia, Inc.”
What to do?
1. Write in the same language on both sides
![Page 9: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/9.jpg)
© Copyright JSC “Arcadia, Inc.”
What to do?
1. Write in the same language on both sides2. Use same code on both sides
![Page 10: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/10.jpg)
© Copyright JSC “Arcadia, Inc.”
Isomorphic? WAT?!
● cross-platform
● multi-platform
● heteromorphic
● ....
![Page 11: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/11.jpg)
© Copyright JSC “Arcadia, Inc.”
Who invented isomorphism?
History:1. 18 Oct 2011
Scaling Isomorphic Javascript Code
2. 01 Apr 2012Yahoo! Mojito Framework
3. 08 Nov 2013The future of web apps is — ready? — isomorphic JavaScript
![Page 12: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/12.jpg)
© Copyright JSC “Arcadia, Inc.”
2. Let’s do isomorphism!
![Page 13: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/13.jpg)
© Copyright JSC “Arcadia, Inc.”
Using scripts
var module = require(‘./jquery’);
<script src="script.js" [async] [defer]></script>
require([‘jquery’], function ($) {// do smth
})
![Page 14: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/14.jpg)
© Copyright JSC “Arcadia, Inc.”
Differences between client & server JS
● Global objectsglobal / window
● Different available apilocalStorage, historyApi, WebGL, Canvas, FileSystem
● Differences in API behaviorcookies, websockets, webworkers
![Page 15: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/15.jpg)
© Copyright JSC “Arcadia, Inc.”
Differences between client & server JS
● Environment
● Script loading
● Available api
● Engine version
![Page 16: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/16.jpg)
© Copyright JSC “Arcadia, Inc.”
Diving into isomorphism
● Understand that you can write as isomorphic● Code kinds
o Code that should not work at frontend side
o Code that should not work at backend side
o Independent of enviroment▪ Write isomorphic unit tests
▪ Perform static analysis
o Dependent of enviroment▪ Create abstract layer
![Page 17: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/17.jpg)
© Copyright JSC “Arcadia, Inc.”
Diving into isomorphism
● Abstraction from enviromentbrowserify, typescript
● Enviroment specific unit testskarma, mocha, phantomjs
● Static code analisysjslint, jshint, eslint, tslint
![Page 18: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/18.jpg)
© Copyright JSC “Arcadia, Inc.”
Code before isomorphism
![Page 19: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/19.jpg)
© Copyright JSC “Arcadia, Inc.”
Simple isomorphic module
(function (exports) {exports.isomorphicSum = function (a, b) {
return a + b;};
})(typeof exports ? exports : window)
![Page 20: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/20.jpg)
© Copyright JSC “Arcadia, Inc.”
More usefull example
http://jsfiddle.net/7o2mrby9/
![Page 21: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/21.jpg)
© Copyright JSC “Arcadia, Inc.”
// NodeJSvar setCookie = require(‘./isomorphicModule’), http = require(‘http’);http.createServer(function (req, response) {
setCookie(‘name’, ‘value’, { dest: response });}).listen(1337, '127.0.0.1');
// Browser:window.setCookie(‘name’, ‘value’);
More usefull example
![Page 22: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/22.jpg)
© Copyright JSC “Arcadia, Inc.”
What is isomorphic code good for?
1. Templating (handlebarsjs)2. Business logic:
o validationo filteringo calculations
3. Using common libraries (jquery, undescore)
![Page 23: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/23.jpg)
© Copyright JSC “Arcadia, Inc.”
Isomorphic libraries
● jquery● undescore● backbonejs● lodash● cryptojs● handlebarsjs● async
![Page 24: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/24.jpg)
© Copyright JSC “Arcadia, Inc.”
3. What’s next?
![Page 25: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/25.jpg)
© Copyright JSC “Arcadia, Inc.”
Full stack javascript frameworks
![Page 26: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/26.jpg)
© Copyright JSC “Arcadia, Inc.”
Profit
✓ decrease loading time✓ search engine indexing✓ decrease logic duplication✓ better code design✓ code consistency
![Page 27: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/27.jpg)
© Copyright JSC “Arcadia, Inc.”
Useful links
Learning resourсes:1. http://venturebeat.com/2013/11/08/the-future-of-web-apps-is-
ready-isomorphic-javascript/2. http://www.slideshare.net/spikebrehm/a-28174727 3. http://isomorphic.net/ 4. http://codewinds.com/podcast/009.html 5. https://github.com/spikebrehm/isomorphic-tutorial
Production examples:1. http://airbnb.com/ 2. https://lever.co/
![Page 28: Isomorphic JS - new silver bullet](https://reader034.vdocument.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/28.jpg)
© Copyright JSC “Arcadia, Inc.”
Q & A