![© Copyright JSC “Arcadia, Inc.”
Using scripts
var module = require(‘./jquery’);
<script src="script.js" [async] [defer]></script>
require([‘jquery’], function ($) {
// do smth
})](https://image.slidesharecdn.com/isomorphicjsvitaliymedvedev-141028065835-conversion-gate02/85/Isomorphic-JS-new-silver-bullet-13-320.jpg)
Isomorphic JS - new silver bullet
- 1. You come with just an idea - we make great software for you! As true as steel to your desire Trust Teamwork Transparency Isomorphic Javascript: new silver bullet Vitaliy Medvedev, Arcadia
- 2. © Copyright JSC “Arcadia, Inc.” About me Vitaliy Medvedev Leading Software Engineer at JSC “Arcadia Inc.” 5+ years of experience in software development vitaliy.medvedev@arcadia.spb.ru
- 3. © Copyright JSC “Arcadia, Inc.” Where JS works ● client ● server ● desktop ● mobile ● quadcopters
- 4. Single page application (SPA) JSON (AJAX/WebSockets) HTML/CSS/JS PHP/C#/Java/NodeJs © Copyright JSC “Arcadia, Inc.” Frontend (MVC) Animation Validation Templating Routing Backend (MVC) Persistence Authentication Heavy calculations
- 5. © Copyright JSC “Arcadia, Inc.” SPA problems ● loading time ● search engine indexing ● logic duplication o different languages - different ecosystems o cross-functional restictions
- 6. © Copyright JSC “Arcadia, Inc.”
- 7. 1. Solution! © Copyright JSC “Arcadia, Inc.”
- 8. © Copyright JSC “Arcadia, Inc.” What to do? 1. Write in the same language on both sides
- 9. © Copyright JSC “Arcadia, Inc.” What to do? 1. Write in the same language on both sides 2. Use same code on both sides
- 10. Isomorphic? WAT?! © Copyright JSC “Arcadia, Inc.” ● cross-platform ● multi-platform ● heteromorphic ● ....
- 11. Who invented isomorphism? © Copyright JSC “Arcadia, Inc.” History: 1. 18 Oct 2011 Scaling Isomorphic Javascript Code 2. 01 Apr 2012 Yahoo! Mojito Framework 3. 08 Nov 2013 The future of web apps is — ready? — isomorphic JavaScript
- 12. 2. Let’s do isomorphism! © Copyright JSC “Arcadia, Inc.”
- 13. © Copyright JSC “Arcadia, Inc.” Using scripts var module = require(‘./jquery’); <script src="script.js" [async] [defer]></script> require([‘jquery’], function ($) { // do smth })
- 14. Differences between client & server JS © Copyright JSC “Arcadia, Inc.” ● Global objects global / window ● Different available api localStorage, historyApi, WebGL, Canvas, FileSystem ● Differences in API behavior cookies, websockets, webworkers
- 15. Differences between client & server JS © Copyright JSC “Arcadia, Inc.” ● Environment ● Script loading ● Available api ● Engine version
- 16. 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.”
- 17. Diving into isomorphism ● Abstraction from enviroment browserify, typescript ● Enviroment specific unit tests karma, mocha, phantomjs ● Static code analisys jslint, jshint, eslint, tslint © Copyright JSC “Arcadia, Inc.”
- 18. Code before isomorphism © Copyright JSC “Arcadia, Inc.”
- 19. Simple isomorphic module © Copyright JSC “Arcadia, Inc.” (function (exports) { exports.isomorphicSum = function (a, b) { return a + b; }; })(typeof exports ? exports : window)
- 20. More usefull example © Copyright JSC “Arcadia, Inc.” http://jsfiddle.net/7o2mrby9/
- 21. More usefull example // NodeJS var setCookie = require(‘./isomorphicModule’), http = require(‘http’); http.createServer(function (req, response) { © Copyright JSC “Arcadia, Inc.” setCookie(‘name’, ‘value’, { dest: response }); }).listen(1337, '127.0.0.1'); // Browser: window.setCookie(‘name’, ‘value’);
- 22. What is isomorphic code good for? 1. Templating (handlebarsjs) 2. Business logic: © Copyright JSC “Arcadia, Inc.” o validation o filtering o calculations 3. Using common libraries (jquery, undescore)
- 23. Isomorphic libraries © Copyright JSC “Arcadia, Inc.” ● jquery ● undescore ● backbonejs ● lodash ● cryptojs ● handlebarsjs ● async
- 24. 3. What’s next? © Copyright JSC “Arcadia, Inc.”
- 25. Full stack javascript frameworks © Copyright JSC “Arcadia, Inc.”
- 26. © Copyright JSC “Arcadia, Inc.” Profit ✓ decrease loading time ✓ search engine indexing ✓ decrease logic duplication ✓ better code design ✓ code consistency
- 27. © 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/
- 28. Q & A © Copyright JSC “Arcadia, Inc.”