Embed Size (px)
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.
Citation preview
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
