Изоморфный JavaScript (iForum 2015)
•
5 likes•1,525 views
Доклад об изоморфном JavaScript (тот же код на клиенте, сервере, мобильном устройстве)
Report
Share
Related slideshows
Изоморфный JavaScript (iForum 2015)
- 1. @maxmaxmaxmaxМАКСИМ КЛИМИШИН CTO ZAKAZ.UA GVMachines Inc. Изоморфный JavaScript
- 2. Обомне ‣ 11+ летопытавебразработки,5летJavaScript, 6летPython ‣ Работалв oDesk,Helios,42cc. ‣ Со-организаторконференцийPyConUkraine, KyivJS ‣ 3годаработаютехническимдиректоромв ZAKAZ.UA
- 7. Проблемыonepageapps Зачем это надо? ‣ Производительность-загрузкаданных, задержкапри старте ‣ Тяжелаяоперацияпорендерингуисозданию DOM-дерева ‣ Недружелюбныедлякраулеров(hashbang)
- 8. Проблемыархитектуры Зачем это надо? ‣ Двойнаявалидациявходныхданных ‣ Поддержкасложнойбизнес-логики одновременнонаклиентеинасервере ‣ Зависимость отсерверавмобильных приложениях
- 10. ПочемуJavaScript? Зачем это надо? ‣ Браузерыполноценноподдерживают только JavaScript ‣ Все.
- 11. Проблема
- 12. JavaScript
- 13. Основныепреграды JavaScript ‣ Несовместимыесcommon.jsбиблиотеки ‣ Плохаясовместимостьмодулей(backward compatibility) ‣ Малоин��трументовдляконтроля асинхронногокода ‣ Глобальноесостояниеимутабельность объектов
- 14. Чтоужеесть? JavaScript ‣ React ‣ Meteor ‣ Derby ‣ Lazojs ‣ …
- 17. КУДА ДВИЖЕТСЯ CLIENT API SERVER изоморфный код DATABASE CACHE MOBILE
- 18. Такое заинтересует кого угодно
- 19. Такое заинтересует кого угодно
- 20. AST,LLVM
- 22. Abstractsyntaxtree AST ‣ pyjamasи другие-анализируетдерево python кодаисоздаеткоднаfront-end ‣ проблемастем,чтонужнодобавлять runtime языка,которыйиспользуется ‣ можноограничитьruntime,нос неполноценнойподдержкойтрудно
- 24. LLVM– Low LevelVirtualMachine LLVM ‣ emscripten–тулзадляпреобразования LLVM в JavaScript ‣ Онпортирруетстекит.д. ‣ Ноеслииспользоватьвместес Clojure Compiler,токодбудетхорошо оптимизированным ‣ Python,Rubyи всеязыкиLLVMвJavaScript
- 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
- 31. Clojure&ClojureScript Clojure ‣ КомпилируетсявJavaScript (какивлюбой другойязык)потому синтаксисотсутствует ‣ SourceMaps+полноценнаяимплементация рантайманаJavaScript– легкодебажить ‣ Неизменяемые структуры данных
- 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"}]
- 37. Service ‣ Синхронныйсервис ‣ Очередь задач,асинхронно Дваварианта
- 40. Выводы
- 41. Выводы ‣ Увеличиваетсяколичествоsharedкода, уменьшаетсярассеивание бизнеслогики междуразнымиплатформами(клиент,сервер, мобильные) ‣ УлучшаетсяUX– засчет пререндеринга пользовательполучаеткартинкунаэкране быстрее ‣ Улучшаетсявидимостьвпоисковыхсистемах ‣ НенужновсепереписыватьнаJavaScript
- 42. Ктовтеме Выводы ‣ Facebook ‣ Instagram ‣ Yahoo!Mail ‣ Walmart ‣ Airbnb ‣ Netflix