Isomorphic JS - new silver bullet
description
Transcript of Isomorphic JS - new silver bullet
![Page 1: Isomorphic JS - new silver bullet](https://reader034.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/6.jpg)
© Copyright JSC “Arcadia, Inc.”
![Page 7: Isomorphic JS - new silver bullet](https://reader034.fdocuments.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/7.jpg)
© Copyright JSC “Arcadia, Inc.”
1. Solution!
![Page 8: Isomorphic JS - new silver bullet](https://reader034.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.in/reader034/viewer/2022052600/55840442d8b42af00a8b4e44/html5/thumbnails/28.jpg)
© Copyright JSC “Arcadia, Inc.”
Q & A