Доклад об изоморфном JavaScript (тот же код на клиенте, сервере, мобильном устройстве)

1. @maxmaxmaxmaxМАКСИМ КЛИМИШИН
CTO ZAKAZ.UA
GVMachines Inc.
Изоморфный
JavaScript

2. Обомне
‣ 11+ летопытавебразработки,5летJavaScript,
6летPython
‣ Работалв oDesk,Helios,42cc.
‣ Со-организаторконференцийPyConUkraine,
KyivJS
‣ 3годаработаютехническимдиректоромв
ZAKAZ.UA

3. Что такое
изоморфный код?
isomorphic

4. Возможностьиспользовать
одини тотжекод
какнаклиентетакинасервере
ISOMORPHIC

5. СЕЙЧАС
CLIENT
API
SERVER
изоморфный код

6. Зачем этонадо?

7. Проблемыonepageapps
Зачем это надо?
‣ Производительность-загрузкаданных,
задержкапри старте
‣ Тяжелаяоперацияпорендерингуисозданию
DOM-дерева
‣ Недружелюбныедлякраулеров(hashbang)

8. Проблемыархитектуры
Зачем это надо?
‣ Двойнаявалидациявходныхданных
‣ Поддержкасложнойбизнес-логики
одновременнонаклиентеинасервере
‣ Зависимость отсерверавмобильных
приложениях

9. ИзоморфныйJavaScript
может
решитьэти проблемы
Зачем это надо?

10. ПочемуJavaScript?
Зачем это надо?
‣ Браузерыполноценноподдерживают
только JavaScript
‣ Все.

11. Проблема

12. JavaScript

13. Основныепреграды
JavaScript
‣ Несовместимыесcommon.jsбиблиотеки
‣ Плохаясовместимостьмодулей(backward
compatibility)
‣ Малоинструментовдляконтроля
асинхронногокода
‣ Глобальноесостояниеимутабельность
объектов

14. Чтоужеесть?
JavaScript
‣ React
‣ Meteor
‣ Derby
‣ Lazojs
‣ …

15. КУДА ДВИЖЕТСЯ
CLIENT
API
SERVER
изоморфный код
DATABASE CACHE

16. React Native
теперьможносоздавать
мобильныеприложения
МОБИЛЬНЫЕ

17. КУДА ДВИЖЕТСЯ
CLIENT
API
SERVER
изоморфный код
DATABASE CACHE
MOBILE

18. Такое заинтересует кого угодно

19. Такое заинтересует кого угодно

20. AST,LLVM

21. Естьвариантырешитьэту
проблемупо другому

22. Abstractsyntaxtree
AST
‣ pyjamasи другие-анализируетдерево python
кодаисоздаеткоднаfront-end
‣ проблемастем,чтонужнодобавлять runtime
языка,которыйиспользуется
‣ можноограничитьruntime,нос
неполноценнойподдержкойтрудно

23. AST
PYTHON
RUBY
…
AST JAVASCRIPT
RUNTIME

24. LLVM– Low LevelVirtualMachine
LLVM
‣ emscripten–тулзадляпреобразования LLVM в
JavaScript
‣ Онпортирруетстекит.д.
‣ Ноеслииспользоватьвместес Clojure
Compiler,токодбудетхорошо
оптимизированным
‣ Python,Rubyи всеязыкиLLVMвJavaScript

25. LLVM
PYTHON
RUBY
…
LLVM INTERMEDIATE JAVASCRIPT
RELOOPER ALGO

26. #include <stdio.h>
int main()
{
int sum = 0;
for (int i = 1; i <= 100; i++)
sum += i;
printf("1+...+100=%dn", sum);
return 0;
}
C

27. @.str = private constant [14 x
i8]
c"1+...+100=%d0A00"
define i32 @main() {
%1 = alloca i32, align 4
%sum = alloca i32, align 4
%i = alloca i32, align 4
store i32 0, i32* %1
store i32 0, i32* %sum, align 4
store i32 1, i32* %i, align 4
br label %2
; <label>:2
%3 = load i32* %i, align 4
%4 = icmp sle i32 %3, 100
br i1 %4, label %5, label %12
; <label>:5
%6 = load i32* %i, align 4
%7 = load i32* %sum, align 4
%8 = add nsw i32 %7, %6
store i32 %8, i32* %sum, align
4
br label %9
; <label>:9
%10 = load i32* %i, align 4
%11 = add nsw i32 %10, 1
store i32 %11, i32* %i, align 4
br label %2
; <label>:12
%13 = load i32* %sum, align 4
%14 = call i32 (i8*, ...)*
@printf(i8* getelementptr
inbounds
([14 x i8]* @.str, i32
0, i32 0),
i32 %13)
ret i32 0 }
LLVMassembly

28. function _main() {
var __label__;
var $1;
var $sum;
var $i;
$1 = 0;
$sum = 0;
$i = 0;
$2$2: while(1) {
var $3 = $i;
var $4 = $3 <= 100;
if (!($4))
{ __label__ = 2; break
$2$2; }
var $6 = $i;
var $7 = $sum;
var $8 = $7 + $6;
$sum = $8;
var $10 = $i;
var $11 = $10 + 1;
$i = $11;
__label__ = 0;
continue $2$2;
}
var $13 = $sum;
var $14 =
_printf(__str, $13);
return 0;
}
Low-levelJavaScript

29. function K() {
var a, b;
b = a = 0;
a:for(;;) {
if(!(b <= 100)) {
break a
}
a += b; b += 1;
}
_printf(J, a);
return 0;
}
+ClosureCompiler

30. Уподходов естьобщаяпроблема–
debugging

31. Clojure&ClojureScript
Clojure
‣ КомпилируетсявJavaScript (какивлюбой
другойязык)потому синтаксисотсутствует
‣ SourceMaps+полноценнаяимплементация
рантайманаJavaScript– легкодебажить
‣ Неизменяемые структуры данных

32. ClojureScript
CLOJURESCRIPT JAVASCRIPT
CLOJURE RUNTIME

33. Lisp
Syntax free
Следствиемотсутствиясинтаксиса–
~35трансляторов/компиляторов/
интерпретаторовlisp-оподобныхязыков

34. OM
ClojureScript+OM
(defn- render-fn* []
(let [js (doto (.getEngineByName (ScriptEngineManager.) "nashorn")
; React requires either "window" or "global" to be defined.
(.eval "var global = this")
(.eval (-> "public/assets/scripts/main.js"
io/resource
io/reader)))
view (.eval js "omelette.view")
render-to-string (fn [edn]
(.invokeMethod
^Invocable js
view
"render_to_string"
(-> edn
list
object-array)))]
(fn render [title state-edn]
(html5
[:head
[:meta {:charset "utf-8"}]
[:meta {:http-equiv "X-UA-Compatible" :content "IE=edge,chrome=1"}]

35. Изоморфный JSкак
отдельныйсервис

36. Апочему-быне сделать
отдельныйсервис,который
рендеритJavaScriptгденадо
Service

37. Service
‣ Синхронныйсервис
‣ Очередь задач,асинхронно
Дваварианта

38. Service
приложение
database cache node.js

39. rendered rendered
task1
запрос2
state
серверзадачnode.js
запрос1
state
task2
cache

40. Выводы

41. Выводы
‣ Увеличиваетсяколичествоsharedкода,
уменьшаетсярассеивание бизнеслогики
междуразнымиплатформами(клиент,сервер,
мобильные)
‣ УлучшаетсяUX– засчет пререндеринга
пользовательполучаеткартинкунаэкране
быстрее
‣ Улучшаетсявидимостьвпоисковыхсистемах
‣ НенужновсепереписыватьнаJavaScript

42. Ктовтеме
Выводы
‣ Facebook
‣ Instagram
‣ Yahoo!Mail
‣ Walmart
‣ Airbnb
‣ Netflix

43. iForum 2015
@maxmaxmaxmax