Languages
Pages
Legal
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
© Copyright JSC “Arcadia, Inc.”
About me
Vitaliy Medvedev
Leading Software Engineer at JSC “Arcadia Inc.”
5+ years of experience in software development
© Copyright JSC “Arcadia, Inc.”
Where JS works
● client● server● desktop● mobile● quadcopters
© 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
© Copyright JSC “Arcadia, Inc.”
SPA problems
● loading time● search engine indexing● logic duplication
o different languages - different ecosystemso cross-functional restictions
© Copyright JSC “Arcadia, Inc.”
© Copyright JSC “Arcadia, Inc.”
1. Solution!
© Copyright JSC “Arcadia, Inc.”
What to do?
1. Write in the same language on both sides
© Copyright JSC “Arcadia, Inc.”
What to do?
1. Write in the same language on both sides2. Use same code on both sides
© Copyright JSC “Arcadia, Inc.”
Isomorphic? WAT?!
● cross-platform
● multi-platform
● heteromorphic
● ....
© 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
© Copyright JSC “Arcadia, Inc.”
2. Let’s do isomorphism!
© Copyright JSC “Arcadia, Inc.”
Using scripts
var module = require(‘./jquery’);
<script src="script.js" [async] [defer]></script>
require([‘jquery’], function ($) {// do smth
})
© 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
© Copyright JSC “Arcadia, Inc.”
Differences between client & server JS
● Environment
● Script loading
● Available api
● Engine version
© 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
© Copyright JSC “Arcadia, Inc.”
Diving into isomorphism
● Abstraction from enviromentbrowserify, typescript
● Enviroment specific unit testskarma, mocha, phantomjs
● Static code analisysjslint, jshint, eslint, tslint
© Copyright JSC “Arcadia, Inc.”
Code before isomorphism
© Copyright JSC “Arcadia, Inc.”
Simple isomorphic module
(function (exports) {exports.isomorphicSum = function (a, b) {
return a + b;};
})(typeof exports ? exports : window)
© Copyright JSC “Arcadia, Inc.”
More usefull example
http://jsfiddle.net/7o2mrby9/
© 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
© 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)
© Copyright JSC “Arcadia, Inc.”
Isomorphic libraries
● jquery● undescore● backbonejs● lodash● cryptojs● handlebarsjs● async
© Copyright JSC “Arcadia, Inc.”
3. What’s next?
© Copyright JSC “Arcadia, Inc.”
Full stack javascript frameworks
© Copyright JSC “Arcadia, Inc.”
Profit
✓ decrease loading time✓ search engine indexing✓ decrease logic duplication✓ better code design✓ code consistency
© 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/
© Copyright JSC “Arcadia, Inc.”
Q & A
Top Related