new silver bullet isomorphic javascript: trust teamwork...
TRANSCRIPT
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
http://twitter.com/imevs
© 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 restrictions
© 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 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 environment
o Dependent of environment
© Copyright JSC “Arcadia, Inc.”
Diving into isomorphism
● Abstraction from environmentbrowserify, typescript
● Environment specific unit testskarma, mocha, phantomjs
● Static code analysisjslint, 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.”
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-tutorial6. http://jsfiddle.net/7o2mrby9/
Production examples:1. http://airbnb.com/ 2. https://lever.co/
© Copyright JSC “Arcadia, Inc.”
Q & A