Your SlideShare is downloading. ×
JavaScript, Moduły
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

JavaScript, Moduły

1,526
views

Published on

JavaScript, Moduły …

JavaScript, Moduły
Organizacja kodu pod serwer i przeglądarkę

Published in: Technology

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
1,526
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript, ModułyOrganizacja kodu pod serwer i przeglądarkę meetjs · Listopad 2011 · Warszawa
  • 2. Mariusz Nowakmariusz@medikoo.com @medikoo github.com/medikooProgramista JavaScript w Roche Sp. z o.o.
  • 3. PrzeglądarkaNa samym początku była przeglądarka.Organizacja kodu, jak to (przeważnie) wyglądało (?)
  • 4. PrzeglądarkaNa samym początku była przeglądarka.Organizacja kodu, jak to (przeważnie) wyglądało (?)• Łączenie plików
  • 5. PrzeglądarkaNapisanych mniej więcej tak:MAIN.module = (function() { var privateVar = ..; var privateMethod = function (args) { // ... }; return { publicProperty: .., publicMethod: function () { // ... } };}());
  • 6. PrzeglądarkaNa samym początku była przeglądarka,Organizacja kodu, jak to (przeważnie) wyglądało (?)• Łączenie plików
  • 7. PrzeglądarkaNa samym początku była przeglądarka,Organizacja kodu, jak to (przeważnie) wyglądało (?)• Łączenie plików• Wzorzec modułu (Module pattern)
  • 8. SerwerPoczątek roku 2009• Wiele dostępnych implementacji: Rhino, Spidermonkey, V8, JSCore• Brak jasno określonych standardów• Programiści chcą pisać moduły, które mogą być uruchomione wdowolnej implementacji
  • 9. SerwerPoczątek roku 2009• Wiele dostępnych implementacji: Rhino, Spidermonkey, V8, JSCore• Brak jasno określonych standardów• Programiści chcą pisać moduły, które mogą być uruchamiane wdowolnej implementacji• Pojawia się potrzeba stworzenia podłoża pod ekosystem podobny dotego jaki ma Python, Ruby czy Java
  • 10. SerwerPoczątek roku 2009• Wiele dostępnych implementacji: Rhino, Spidermonkey, V8, JSCore• Brak jasno określonych standardów• Programiści chcą pisać moduły, które mogą być uruchamiane wdowolnej implementacji• Pojawia się potrzeba stworzenia podłoża pod ekosystem podobny dotego jaki ma Python, Ruby czy Java• Powstaje grupa ServerJS, przemianowana później na CommonJS-> http://www.blueskyonmars.com/2009/01/29/what-server-side-javascript-needs/
  • 11. SerwerGrupa CommonJS przygotowuje między innymi specyfikacjęmodułów. -> http://www.commonjs.org/specs/modules/1.0/
  • 12. SerwerGrupa CommonJS przygotowuje między innymi specyfikacjęmodułów. -> http://www.commonjs.org/specs/modules/1.0/add.jsexports.add = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum;};increment.jsvar add = require(add).add;exports.increment = function(val) { return add(val, 1);};program.jsvar inc = require(increment).increment;var a = 1;inc(a); // 2
  • 13. SerwerMniej więcej w tym samym czasie powstaje Node.js, któryimplementuje Moduły z CommonJSadd.jsexports.add = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum;};increment.jsvar add = require(add).add;exports.increment = function(val) { return add(val, 1);};program.jsvar inc = require(increment).increment;var a = 1;inc(a); // 2
  • 14. SerwerMniej więcej w tym samym czasie powstaje Node.js, któryimplementuje Moduły z CommonJS... z pewnymi udogodnieniamiadd.jsmodule.exports = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum;};increment.jsvar add = require(./add);module.exports = function(val) { return add(val, 1);};program.jsvar inc = require(./increment);var a = 1;inc(a); // 2
  • 15. SerwerJak to działa: // increment.js var add = require(./add); module.exports = function (val) { return add(val, 1); };
  • 16. SerwerJak to działa:var exports, module;function (exports, require, module) { // increment.js var add = require(./add); module.exports = function (val) { return add(val, 1); };}.call(exports = {}, exports, function (path) { // import zewnętrznego modułu}, module = { exports: exports });MODULE = module.exports;
  • 17. SerwerWróćmy do wzorca Modułu.
  • 18. SerwerWróćmy do wzorca Modułu.module.jsMAIN.module = (function() { var privateVar = ..; var privateMethod = function (args) { // ... }; return { publicProperty: .., publicMethod: function () { // ... } };}());
  • 19. SerwerWzorzec modułu jako moduł CommonJS:module.jsvar privateVar = ..;var privateMethod = function (args) { // ...};exports.publicProperty: ..,exports.publicMethod: function () { // ...};program.jsvar foobar = require(‘./module’);
  • 20. SerwerWzorzec modułu jako moduł CommonJS:module.jsvar privateVar = ..;var privateMethod = function (args) { // ...};exports.publicProperty: ..,exports.publicMethod: function () { // ...};program.jsvar foobar = require(‘./module’); ↑ sami decydujemy jaką nazwą chcemy odwoływać się do zaciągniętegomodułu.
  • 21. SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?
  • 22. SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?Przede wszystkim przejrzystość kodu i enkapsulacja nanajlepszym możliwym (w JavaScript) poziomie
  • 23. SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?Przede wszystkim przejrzystość kodu i enkapsulacja nanajlepszym możliwym (w JavaScript) poziomie• Nie ma potrzeby tworzenia zbędnych “wrapper’ów” by pracować w“swoim” zakresie zmiennych
  • 24. SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?Przede wszystkim przejrzystość kodu i enkapsulacja nanajlepszym możliwym (w JavaScript) poziomie• Nie ma potrzeby tworzenia zbędnych “wrapper’ów” by pracować w“swoim” zakresie zmiennych• Nie toniemy w długich przestrzeniach nazw - każdy potrzebnyzewnętrzny moduł przypisujemy do lokalnej zmiennej
  • 25. SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?Przede wszystkim przejrzystość kodu i enkapsulacja nanajlepszym możliwym (w JavaScript) poziomie• Nie ma potrzeby tworzenia zbędnych “wrapper’ów” by pracować w“swoim” zakresie zmiennych• Nie toniemy w długich przestrzeniach nazw - każdy potrzebnyzewnętrzny moduł przypisujemy do lokalnej zmiennej• Możemy zbudować dużą, złożoną aplikację, nie dotykając globalnejprzestrzeni nazw
  • 26. Serwer i PrzeglądarkaJak uruchomić tak napisany kod pod przeglądarką ?
  • 27. Serwer i PrzeglądarkaJak uruchomić tak napisany kod pod przeglądarką ?Kiedy zainteresowałem się CommonJS oraz Node.js(początek 2011), byłem przekonany, że już istnieje solidnerozwiązanie.
  • 28. Serwer i PrzeglądarkaJak uruchomić tak napisany kod pod przeglądarką ?Kiedy zainteresowałem się CommonJS oraz Node.js(początek 2011), byłem przekonany, że już istnieje solidnerozwiązanie.Znalazłem ok. 8-10 rozwiązań próbujących robić cośpodobnego, jednak żadne nie było satysfakcjonujące
  • 29. Serwer i PrzeglądarkaGłówny problem polegał na tym, że każde rozwiązaniepróbowało być czymś więcej niż parserem zależnościmodułów CommonJS.
  • 30. Serwer i PrzeglądarkaGłówny problem polegał na tym, że każde rozwiązaniepróbowało być czymś więcej niż parserem zależnościmodułów CommonJS.Sama implementacja parsera w każdym rozwiązaniu, teżniestety pozostawiała wiele do życzenia.
  • 31. Serwer i PrzeglądarkaNajciekawsze rozwiązania
  • 32. Serwer i PrzeglądarkaNajciekawsze rozwiązaniaBrowserify -> https://github.com/substack/node-browserify
  • 33. Serwer i PrzeglądarkaNajciekawsze rozwiązaniaBrowserify -> https://github.com/substack/node-browserifyBardzo ciekawe narzędzie jeśli chcemy wykorzystać moduły dostarczanez Node.js. Browserify stara się umożliwić działanie takiego kodu postronie przeglądarki - taki też był główny zamysł projektu
  • 34. Serwer i PrzeglądarkaNajciekawsze rozwiązaniaBrowserify -> https://github.com/substack/node-browserifyBardzo ciekawe narzędzie jeśli chcemy wykorzystać moduły dostarczanez Node.js. Browserify stara się umożliwić działanie takiego kodu postronie przeglądarki - taki też był główny zamysł projektuDość duża ilość kodu, obsługującego moduły po stronie przeglądarki (ok.320 linii).
  • 35. Serwer i PrzeglądarkaNajciekawsze rozwiązaniaBrowserify -> https://github.com/substack/node-browserifyBardzo ciekawe narzędzie jeśli chcemy wykorzystać moduły dostarczanez Node.js. Browserify stara się umożliwić działanie takiego kodu postronie przeglądarki - taki też był główny zamysł projektuDość duża ilość kodu, obsługującego moduły po stronie przeglądarki (ok.320 linii).Niestety nie radzi sobie z niektórymi ścieżkami (nie sczytuje modułów zzewnętrznych pakietów ?)
  • 36. Serwer i PrzeglądarkaAMD czyli Asynchronous Module Definition
  • 37. Serwer i PrzeglądarkaAMD czyli Asynchronous Module DefinitionOstatnio pojawiło się wiele materiałów na ten temat:http://addyosmani.com/writing-modular-js/http://blog.millermedeiros.com/2011/09/amd-is-better-for-the-web-than-commonjs-modules/http://unscriptable.com/index.php/2011/09/30/amd-versus-cjs-whats-the-best-format/
  • 38. Serwer i PrzeglądarkaAMD ?
  • 39. Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMD
  • 40. Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMD
  • 41. Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMDAMD ma nie wiele wspólnego z Modułami CommonJS, wymaga innejdyscypliny pisania kodu
  • 42. Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMDAMD ma nie wiele wspólnego z Modułami CommonJS, wymaga innejdyscypliny pisania kodu• Wszystkie zależności deklarujemy na początku modułu
  • 43. Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMDAMD ma nie wiele wspólnego z Modułami CommonJS, wymaga innejdyscypliny pisania kodu• Wszystkie zależności deklarujemy na początku modułuW modułach CommonJS możemy sięgać po zewnętrzne moduły w dowolnym miejscu- podobnie będzie w Harmony
  • 44. Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMDAMD ma nie wiele wspólnego z Modułami CommonJS, wymaga innejdyscypliny pisania kodu• Wszystkie zależności deklarujemy na początku modułuW modułach CommonJS możemy sięgać po zewnętrzne moduły w dowolnym miejscu- podobnie będzie w Harmony• Ponownie każdy moduł musimy owijać funkcją deklarującą moduł
  • 45. Serwer i PrzeglądarkaDlaczego tak jest ?
  • 46. Serwer i PrzeglądarkaDlaczego tak jest ?AMD próbuje rozwiązywać dwa problemy:• Modularyzacja/Organizacja kodu• Dynamiczne dociąganie zależności (na żądanie)
  • 47. Serwer i PrzeglądarkaDlaczego tak jest ?AMD próbuje rozwiązywać dwa problemy:• Modularyzacja/Organizacja kodu• Dynamiczne dociąganie zależności (na żądanie)Brzmi obiecująco, ale czy warto ?
  • 48. Serwer i PrzeglądarkaJak wygląda AMD ?
  • 49. Serwer i PrzeglądarkaJak wygląda AMD ?add.jsdefine(function () { return function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum; };});increment.jsdefine([add], function (add) { return function(val) { return add(val, 1); };});program.jsdefine([increment], function (inc) { var a = 1; inc(a); // 2});
  • 50. Serwer i PrzeglądarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wciągnięcia do przeglądarki ok 2000 liniikodu
  • 51. Serwer i PrzeglądarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wciągnięcia do przeglądarki ok 2000 liniikodu... tylko po to byśmy mogli uruchomić właściwy kod
  • 52. Serwer i PrzeglądarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wciągnięcia do przeglądarki ok 2000 liniikodu... tylko po to byśmy mogli uruchomić właściwy kod... którego i tak bez kompilacji dodatkowym narzędziemnie będziemy mogli wykorzystać po stronie serwera (wNode.js).
  • 53. Serwer i PrzeglądarkaOk, ale co z dynamicznym doładowywaniem zależności ?Taki jest przecież główny cel i przyczyna złożoności AMD.
  • 54. Serwer i PrzeglądarkaOk, ale co z dynamicznym doładowywaniem zależności ?Taki jest przecież główny cel i przyczyna złożoności AMD.Dynamiczne doładowywanie powinno się rozgrywać napoziomie funkcjonalności nie na poziomie modułów.
  • 55. Serwer i PrzeglądarkaOk, ale co z dynamicznym doładowywaniem zależności ?Taki jest przecież główny cel i przyczyna złożoności AMD.Dynamiczne doładowywanie powinno się rozgrywać napoziomie funkcjonalności nie na poziomie modułów. (takie jest przynajmniej moje zdanie ;)
  • 56. Serwer i PrzeglądarkaPodsumowanie:
  • 57. Serwer i PrzeglądarkaPodsumowanie:Brakuje lekkiej i czystej implementacji modułów CommonJS(precyzyjniej modułów Node.js),
  • 58. Serwer i PrzeglądarkaPodsumowanie:Brakuje lekkiej i czystej implementacji modułów CommonJS(precyzyjniej modułów Node.js),Implementacji, która nie próbuje dodatkowym kosztemrozwiązywać innych problemów.
  • 59. Serwer i PrzeglądarkaPodsumowanie:Brakuje lekkiej i czystej implementacji modułów CommonJS(precyzyjniej modułów Node.js),Implementacji, która nie próbuje dodatkowym kosztemrozwiązywać innych problemów.Kod wiążący moduły powinien być minimalny, niezauważalny wporównaniu do kodu aplikacji.
  • 60. Serwer i PrzeglądarkaOstatecznie narodził się nowy projekt:
  • 61. Serwer i PrzeglądarkaOstatecznie narodził się nowy projekt:modules-webmake ->https://github.com/medikoo/modules-webmakenpm install -g webmake
  • 62. Modules Webmakemodules-webmake buduje drzewo zależności między modułami iwypluwa je jako jeden plik wykonywalny po stronie przeglądarki.
  • 63. Modules Webmakemodules-webmake buduje drzewo zależności między modułami iwypluwa je jako jeden plik wykonywalny po stronie przeglądarki.Obecna implementacja jest bardzo podstawowa, można powiedziećjesteśmy na starcie.
  • 64. Modules Webmakemodules-webmake buduje drzewo zależności między modułami iwypluwa je jako jeden plik wykonywalny po stronie przeglądarki.Obecna implementacja jest bardzo podstawowa, można powiedziećjesteśmy na starcie.Nie przeszkadza to jednak w budowaniu dużych aplikacji, złożonychz kilkuset modułów, pochodzących z kilkunastu pakietów(package’y)
  • 65. Modules Webmakemodules-webmake buduje drzewo zależności między modułami iwypluwa je jako jeden plik wykonywalny po stronie przeglądarki.Obecna implementacja jest bardzo podstawowa, można powiedziećjesteśmy na starcie.Nie przeszkadza to jednak w budowaniu dużych aplikacji, złożonychz kilkuset modułów, pochodzących z kilkunastu pakietów(package’y)Z modules-webmake już teraz możecie budować duże, złożoneaplikacje
  • 66. Modules WebmakeJak wygląda wygenerowany plik ?
  • 67. Modules WebmakeJak wygląda wygenerowany plik ?(function (modules) { // 53 linie kodu obsługującego zależności})({ "root": { "add.js": function (exports, module, require) { module.exports = function () { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum; }; }, "increment.js": function (exports, module, require) { var add = require(./add); module.exports = function (val) { return add(val, 1); }; }, "program.js": function (exports, module, require) { var inc = require(./increment); var a = 1; inc(a); // 2 } }})("root/program");
  • 68. Modules WebmakeJak wygląda wygenerowany plik ?(function (modules) { // 53 linie kodu obsługującego zależności})({ "root": { "add.js": function (exports, module, require) { module.exports = function () { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum; }; }, "increment.js": function (exports, module, require) { var add = require(./add); module.exports = function (val) { return add(val, 1); }; }, "program.js": function (exports, module, require) { var inc = require(./increment); var a = 1; inc(a); // 2 } }})("root/program"); <- Wykonanie modułu inicjującego aplikację
  • 69. Modules Webmake• modules-webmake może być wykorzystywany zarówno z poziomu konsoli jak iprogramistycznie - możemy podczepić narzędzie bezpośrednio pod serwer http wNode.js i tym samym skonfigurować automatyczne generowanie plików
  • 70. Modules Webmake• modules-webmake może być wykorzystywany zarówno z poziomu konsoli jak iprogramistycznie - możemy podczepić narzędzie bezpośrednio pod serwer http wNode.js i tym samym skonfigurować automatyczne generowanie plików• Zależności są parsowane statycznie, stwarza to pewne ograniczenia. Dlaspecyficznych przypadków możemy wymusić dociągnięcie wybranych zależnościopcją ‘include’
  • 71. Modules Webmake• modules-webmake może być wykorzystywany zarówno z poziomu konsoli jak iprogramistycznie - możemy podczepić narzędzie bezpośrednio pod serwer http wNode.js i tym samym skonfigurować automatyczne generowanie plików• Zależności są parsowane statycznie, stwarza to pewne ograniczenia. Dlaspecyficznych przypadków możemy wymusić dociągnięcie wybranych zależnościopcją ‘include’• modules-webmake sczytuje zależności z lokalnego pakietu jak i z zewnętrznychpakietów, jedynym ograniczeniem (obecnie) jest to, że nie rozróżnia dwóch różnychwersji tego samego pakietu.
  • 72. Modules Webmake• modules-webmake może być wykorzystywany zarówno z poziomu konsoli jak iprogramistycznie - możemy podczepić narzędzie bezpośrednio pod serwer http wNode.js i tym samym skonfigurować automatyczne generowanie plików• Zależności są parsowane statycznie, stwarza to pewne ograniczenia. Dlaspecyficznych przypadków możemy wymusić dociągnięcie wybranych zależnościopcją ‘include’• modules-webmake sczytuje zależności z lokalnego pakietu jak i z zewnętrznychpakietów, jedynym ograniczeniem (obecnie) jest to, że nie rozróżnia dwóch różnychwersji tego samego pakietu.• Pełniejsza dokumentacja zawsze dostępna pod adresem:https://github.com/medikoo/modules-webmake
  • 73. Modules WebmakeNa początku tego miesiąca skończyłem pracę nad aplikacją budowaną z pomocąmodules-webmake.• Aplikacja HTML5, adresowana tylko pod nowoczesne przeglądarki (Najnowszewersje FF, Chrome i Safari (OSX oraz iOS))• Tryb offline, wymusza to przeniesienie całej logiki aplikacji, wraz z szablonami iprostym silnikiem bazy danych na stronę klienta.• Strona serwera obsługiwana przez Node.js zajmuje się synchronizacją klientóworaz zapisywaniem zmian do fizycznej bazy danych (mongodb)• Minimalistyczna komunikacja klient-serwer oparta na socket’ach (obecnieSocket.IO)
  • 74. Modules WebmakePlik wynikowy po stronie klienta obecnie, wykorzystuje 273 moduły z 19 pakietów.176 powyższych modułów pracuje również po stronie serwera.Daje to w przybliżeniu ok 60% kodu wykorzystywanego po obu stronach.Połączony plik składa się z ok 11 tysięcy linii koduZajmuje, ok 370kB przed minifikacją i spakowaniem.Jest to dość obiecujące, jeśli weźmiemy pod uwagę, że zawarte są w nim szablonydla całej aplikacji oraz wszystkie moduły składające się na aplikację wraz z silnikiembazy danych.Po zaciągnięciu aplikacji komunikacja z serwerem jest ograniczona do minium,wszystkie strony są generowane przez klienta.
  • 75. Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:
  • 76. Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik modułów.W jakim celu? Umożliwi to testowanie modułów wraz z ich zależnościami w różnieskonfigurowanych środowiskach, np. tylko V8 i Moduły, lub emulacja środowiskaprzeglądarkowego.
  • 77. Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik modułów.W jakim celu? Umożliwi to testowanie modułów wraz z ich zależnościami w różnieskonfigurowanych środowiskach, np. tylko V8 i Moduły, lub emulacja środowiskaprzeglądarkowego.• Praca w tle, czyli natychmiastowa aktualizacja plików po zaobserwowanychzmianach lub przy integracji z serwerem natychmiastowe serwowanie plikówtrzymanych w pamięci podręcznej.
  • 78. Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik modułów.W jakim celu? Umożliwi to testowanie modułów wraz z ich zależnościami w różnieskonfigurowanych środowiskach, np. tylko V8 i Moduły, lub emulacja środowiskaprzeglądarkowego.• Praca w tle, czyli natychmiastowa aktualizacja plików po zaobserwowanychzmianach lub przy integracji z serwerem natychmiastowe serwowanie plikówtrzymanych w pamięci podręcznej.• Opcjonalna minifikacja, kompilacja
  • 79. Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik modułów.W jakim celu? Umożliwi to testowanie modułów wraz z ich zależnościami w różnieskonfigurowanych środowiskach, np. tylko V8 i Moduły, lub emulacja środowiskaprzeglądarkowego.• Praca w tle, czyli natychmiastowa aktualizacja plików po zaobserwowanychzmianach lub przy integracji z serwerem natychmiastowe serwowanie plikówtrzymanych w pamięci podręcznej.• Opcjonalna minifikacja, kompilacja• Wykrywanie niewykorzystanych zależności
  • 80. Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik modułów.W jakim celu? Umożliwi to testowanie modułów wraz z ich zależnościami w różnieskonfigurowanych środowiskach, np. tylko V8 i Moduły, lub emulacja środowiskaprzeglądarkowego.• Praca w tle, czyli natychmiastowa aktualizacja plików po zaobserwowanychzmianach lub przy integracji z serwerem natychmiastowe serwowanie plikówtrzymanych w pamięci podręcznej.• Opcjonalna minifikacja, kompilacja• Wykrywanie niewykorzystanych zależności• Rozbijanie plików, w celu szybszego podawania kodu przeglądarce
  • 81. Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik modułów.W jakim celu? Umożliwi to testowanie modułów wraz z ich zależnościami w różnieskonfigurowanych środowiskach, np. tylko V8 i Moduły, lub emulacja środowiskaprzeglądarkowego.• Praca w tle, czyli natychmiastowa aktualizacja plików po zaobserwowanychzmianach lub przy integracji z serwerem natychmiastowe serwowanie plikówtrzymanych w pamięci podręcznej.• Opcjonalna minifikacja, kompilacja• Wykrywanie niewykorzystanych zależności• Rozbijanie plików, w celu szybszego podawania kodu przeglądarce• Inteligentna generacja wielu plików (moduły nie powinny się powtarzać w różnychplikach)
  • 82. Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik modułów.W jakim celu? Umożliwi to testowanie modułów wraz z ich zależnościami w różnieskonfigurowanych środowiskach, np. tylko V8 i Moduły, lub emulacja środowiskaprzeglądarkowego.• Praca w tle, czyli natychmiastowa aktualizacja plików po zaobserwowanychzmianach lub przy integracji z serwerem natychmiastowe serwowanie plikówtrzymanych w pamięci podręcznej.• Opcjonalna minifikacja, kompilacja• Wykrywanie niewykorzystanych zależności• Rozbijanie plików, w celu szybszego podawania kodu przeglądarce• Inteligentna generacja wielu plików (moduły nie powinny się powtarzać w różnychplikach)• Poprawianie kodu pod silniki z niepełnym wsparciem ES5 np. owijanie apostrofaminazw właściwości, które odpowiadają nazwom zastrzeżonym (drobne udogodnienia)
  • 83. Przyszłość: HarmonyBędziemy mieli natywny silnik modułów w JavaScript.http://wiki.ecmascript.org/doku.php?id=harmony:modules_examples
  • 84. Przyszłość: HarmonyBędziemy mieli natywny silnik modułów w JavaScript.http://wiki.ecmascript.org/doku.php?id=harmony:modules_examplesPodstawa modułów w Harmony jest koncepcyjnie takasama jak modułów w CommonJS.
  • 85. Przyszłość: HarmonyBędziemy mieli natywny silnik modułów w JavaScript.http://wiki.ecmascript.org/doku.php?id=harmony:modules_examplesPodstawa modułów w Harmony jest koncepcyjnie takasama jak modułów w CommonJS.Różnice leżą w dedykowanej składni jak i wdodatkowych możliwościach - dynamiczne ładowanie,możliwość importowania modułów przez url itp.
  • 86. Harmony Modules
  • 87. Harmony ModulesTak obecnie jest w Node.js:add.jsmodule.exports = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum;};increment.jsvar add = require(./add);module.exports = function(val) { return add(val, 1);};program.jsvar inc = require(./increment);var a = 1;inc(a); // 2
  • 88. Harmony ModulesTak będzie w Harmony:add.jsexport function add () { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum;};increment.jsimport add from ./add;export function increment (val) { return add(val, 1);};program.jsimport { increment: inc } from ./increment;var a = 1;inc(a); // 2
  • 89. Harmony ModulesModules Webmake dla ES3/5:(function (modules) { // 53 linie kodu obsługującego zależności})({ "root": { "add.js": function (exports, module, require) { module.exports = function () { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum; }; }, "increment.js": function (exports, module, require) { var add = require(./add); module.exports = function (val) { return add(val, 1); }; }, "program.js": function (exports, module, require) { var inc = require(./increment); var a = 1; inc(a); // 2 } }})("root/program");
  • 90. Harmony ModulesModules Webmake dla Harmony: module add { export function add () { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) sum += args[i++]; return sum; }; }; module increment { import add from add; export function increment (val) { return add(val, 1); }; }; module program { import { increment: inc } from increment; var a = 1; inc(a); // 2 };import * from program;
  • 91. Serwer i PrzeglądarkaJeśli dziś korzystasz z Modułów CommonJS, przejście zaparę lat na Moduły w Harmony będzie bezproblemowe
  • 92. Serwer i PrzeglądarkaJeśli dziś korzystasz z Modułów CommonJS, przejście zaparę lat na Moduły w Harmony będzie bezproblemoweDziś:CommonJS Modules & modules-webmake
  • 93. Serwer i PrzeglądarkaJeśli dziś korzystasz z Modułów CommonJS, przejście zaparę lat na Moduły w Harmony będzie bezproblemoweDziś:CommonJS Modules & modules-webmakeJutro:Harmony Modules
  • 94. Serwer i PrzeglądarkaJeśli dziś korzystasz z Modułów CommonJS, przejście zaparę lat na Moduły w Harmony będzie bezproblemoweDziś:CommonJS Modules & modules-webmakeJutro:Harmony Modules (& modules-webmake ?)
  • 95. Pytania ?
  • 96. Dziękuję !Mariusz Nowakmariusz@medikoo.com @medikoo github.com/medikoo