JavaScript, ModułyOrganizacja kodu pod serwer i przeglądarkę                         meetjs · Listopad 2011 · Warszawa
Mariusz Nowakmariusz@medikoo.com   @medikoo   github.com/medikooProgramista JavaScript w Roche Sp. z o.o.
PrzeglądarkaNa samym początku była przeglądarka.Organizacja kodu, jak to (przeważnie) wyglądało (?)
PrzeglądarkaNa samym początku była przeglądarka.Organizacja kodu, jak to (przeważnie) wyglądało (?)• Łączenie plików
PrzeglądarkaNapisanych mniej więcej tak:MAIN.module = (function() {    var privateVar = ..;   var privateMethod = function...
PrzeglądarkaNa samym początku była przeglądarka,Organizacja kodu, jak to (przeważnie) wyglądało (?)• Łączenie plików
PrzeglądarkaNa samym początku była przeglądarka,Organizacja kodu, jak to (przeważnie) wyglądało (?)• Łączenie plików• Wzor...
SerwerPoczątek roku 2009• Wiele dostępnych implementacji: Rhino, Spidermonkey, V8, JSCore• Brak jasno określonych standard...
SerwerPoczątek roku 2009• Wiele dostępnych implementacji: Rhino, Spidermonkey, V8, JSCore• Brak jasno określonych standard...
SerwerPoczątek roku 2009• Wiele dostępnych implementacji: Rhino, Spidermonkey, V8, JSCore• Brak jasno określonych standard...
SerwerGrupa CommonJS przygotowuje między innymi specyfikacjęmodułów. -> http://www.commonjs.org/specs/modules/1.0/
SerwerGrupa CommonJS przygotowuje między innymi specyfikacjęmodułów. -> http://www.commonjs.org/specs/modules/1.0/add.jsexp...
SerwerMniej więcej w tym samym czasie powstaje Node.js, któryimplementuje Moduły z CommonJSadd.jsexports.add = function() ...
SerwerMniej więcej w tym samym czasie powstaje Node.js, któryimplementuje Moduły z CommonJS... z pewnymi udogodnieniamiadd...
SerwerJak to działa:   // increment.js   var add = require(./add);   module.exports = function (val) {       return add(va...
SerwerJak to działa:var exports, module;function (exports, require, module) {   // increment.js   var add = require(./add)...
SerwerWróćmy do wzorca Modułu.
SerwerWróćmy do wzorca Modułu.module.jsMAIN.module = (function() {    var privateVar = ..;    var privateMethod = function...
SerwerWzorzec modułu jako moduł CommonJS:module.jsvar privateVar = ..;var privateMethod = function (args) {    // ...};exp...
SerwerWzorzec modułu jako moduł CommonJS:module.jsvar privateVar = ..;var privateMethod = function (args) {    // ...};exp...
SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?
SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?Przede wszystkim przejrzystość kodu i enkapsulacja nanajle...
SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?Przede wszystkim przejrzystość kodu i enkapsulacja nanajle...
SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?Przede wszystkim przejrzystość kodu i enkapsulacja nanajle...
SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?Przede wszystkim przejrzystość kodu i enkapsulacja nanajle...
Serwer i PrzeglądarkaJak uruchomić tak napisany kod pod przeglądarką ?
Serwer i PrzeglądarkaJak uruchomić tak napisany kod pod przeglądarką ?Kiedy zainteresowałem się CommonJS oraz Node.js(pocz...
Serwer i PrzeglądarkaJak uruchomić tak napisany kod pod przeglądarką ?Kiedy zainteresowałem się CommonJS oraz Node.js(pocz...
Serwer i PrzeglądarkaGłówny problem polegał na tym, że każde rozwiązaniepróbowało być czymś więcej niż parserem zależności...
Serwer i PrzeglądarkaGłówny problem polegał na tym, że każde rozwiązaniepróbowało być czymś więcej niż parserem zależności...
Serwer i PrzeglądarkaNajciekawsze rozwiązania
Serwer i PrzeglądarkaNajciekawsze rozwiązaniaBrowserify -> https://github.com/substack/node-browserify
Serwer i PrzeglądarkaNajciekawsze rozwiązaniaBrowserify -> https://github.com/substack/node-browserifyBardzo ciekawe narzę...
Serwer i PrzeglądarkaNajciekawsze rozwiązaniaBrowserify -> https://github.com/substack/node-browserifyBardzo ciekawe narzę...
Serwer i PrzeglądarkaNajciekawsze rozwiązaniaBrowserify -> https://github.com/substack/node-browserifyBardzo ciekawe narzę...
Serwer i PrzeglądarkaAMD czyli Asynchronous Module Definition
Serwer i PrzeglądarkaAMD czyli Asynchronous Module DefinitionOstatnio pojawiło się wiele materiałów na ten temat:http://add...
Serwer i PrzeglądarkaAMD ?
Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMD
Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMD
Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMDAMD ma nie wiele wspólne...
Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMDAMD ma nie wiele wspólne...
Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMDAMD ma nie wiele wspólne...
Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMDAMD ma nie wiele wspólne...
Serwer i PrzeglądarkaDlaczego tak jest ?
Serwer i PrzeglądarkaDlaczego tak jest ?AMD próbuje rozwiązywać dwa problemy:• Modularyzacja/Organizacja kodu• Dynamiczne ...
Serwer i PrzeglądarkaDlaczego tak jest ?AMD próbuje rozwiązywać dwa problemy:• Modularyzacja/Organizacja kodu• Dynamiczne ...
Serwer i PrzeglądarkaJak wygląda AMD ?
Serwer i PrzeglądarkaJak wygląda AMD ?add.jsdefine(function () {     return function() {          var sum = 0, i = 0, args...
Serwer i PrzeglądarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wciągnięcia do przeglądarki ok ...
Serwer i PrzeglądarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wciągnięcia do przeglądarki ok ...
Serwer i PrzeglądarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wciągnięcia do przeglądarki ok ...
Serwer i PrzeglądarkaOk, ale co z dynamicznym doładowywaniem zależności ?Taki jest przecież główny cel i przyczyna złożono...
Serwer i PrzeglądarkaOk, ale co z dynamicznym doładowywaniem zależności ?Taki jest przecież główny cel i przyczyna złożono...
Serwer i PrzeglądarkaOk, ale co z dynamicznym doładowywaniem zależności ?Taki jest przecież główny cel i przyczyna złożono...
Serwer i PrzeglądarkaPodsumowanie:
Serwer i PrzeglądarkaPodsumowanie:Brakuje lekkiej i czystej implementacji modułów CommonJS(precyzyjniej modułów Node.js),
Serwer i PrzeglądarkaPodsumowanie:Brakuje lekkiej i czystej implementacji modułów CommonJS(precyzyjniej modułów Node.js),I...
Serwer i PrzeglądarkaPodsumowanie:Brakuje lekkiej i czystej implementacji modułów CommonJS(precyzyjniej modułów Node.js),I...
Serwer i PrzeglądarkaOstatecznie narodził się nowy projekt:
Serwer i PrzeglądarkaOstatecznie narodził się nowy projekt:modules-webmake ->https://github.com/medikoo/modules-webmakenpm...
Modules Webmakemodules-webmake buduje drzewo zależności między modułami iwypluwa je jako jeden plik wykonywalny po stronie...
Modules Webmakemodules-webmake buduje drzewo zależności między modułami iwypluwa je jako jeden plik wykonywalny po stronie...
Modules Webmakemodules-webmake buduje drzewo zależności między modułami iwypluwa je jako jeden plik wykonywalny po stronie...
Modules Webmakemodules-webmake buduje drzewo zależności między modułami iwypluwa je jako jeden plik wykonywalny po stronie...
Modules WebmakeJak wygląda wygenerowany plik ?
Modules WebmakeJak wygląda wygenerowany plik ?(function (modules) {    // 53 linie kodu obsługującego zależności})({     "...
Modules WebmakeJak wygląda wygenerowany plik ?(function (modules) {    // 53 linie kodu obsługującego zależności})({     "...
Modules Webmake• modules-webmake może być wykorzystywany zarówno z poziomu konsoli jak iprogramistycznie - możemy podczepi...
Modules Webmake• modules-webmake może być wykorzystywany zarówno z poziomu konsoli jak iprogramistycznie - możemy podczepi...
Modules Webmake• modules-webmake może być wykorzystywany zarówno z poziomu konsoli jak iprogramistycznie - możemy podczepi...
Modules Webmake• modules-webmake może być wykorzystywany zarówno z poziomu konsoli jak iprogramistycznie - możemy podczepi...
Modules WebmakeNa początku tego miesiąca skończyłem pracę nad aplikacją budowaną z pomocąmodules-webmake.• Aplikacja HTML5...
Modules WebmakePlik wynikowy po stronie klienta obecnie, wykorzystuje 273 moduły z 19 pakietów.176 powyższych modułów prac...
Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:
Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik mo...
Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik mo...
Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik mo...
Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik mo...
Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik mo...
Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik mo...
Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:• Nie tylko parser zależności ale również pełnoprawny silnik mo...
Przyszłość: HarmonyBędziemy mieli natywny silnik modułów w JavaScript.http://wiki.ecmascript.org/doku.php?id=harmony:modul...
Przyszłość: HarmonyBędziemy mieli natywny silnik modułów w JavaScript.http://wiki.ecmascript.org/doku.php?id=harmony:modul...
Przyszłość: HarmonyBędziemy mieli natywny silnik modułów w JavaScript.http://wiki.ecmascript.org/doku.php?id=harmony:modul...
Harmony Modules
Harmony ModulesTak obecnie jest w Node.js:add.jsmodule.exports = function() {     var sum = 0, i = 0, args = arguments, l ...
Harmony ModulesTak będzie w Harmony:add.jsexport function add () {     var sum = 0, i = 0, args = arguments, l = args.leng...
Harmony ModulesModules Webmake dla ES3/5:(function (modules) {    // 53 linie kodu obsługującego zależności})({     "root"...
Harmony ModulesModules Webmake dla Harmony:         module add {              export function add () {                   v...
Serwer i PrzeglądarkaJeśli dziś korzystasz z Modułów CommonJS, przejście zaparę lat na Moduły w Harmony będzie bezproblemowe
Serwer i PrzeglądarkaJeśli dziś korzystasz z Modułów CommonJS, przejście zaparę lat na Moduły w Harmony będzie bezproblemo...
Serwer i PrzeglądarkaJeśli dziś korzystasz z Modułów CommonJS, przejście zaparę lat na Moduły w Harmony będzie bezproblemo...
Serwer i PrzeglądarkaJeśli dziś korzystasz z Modułów CommonJS, przejście zaparę lat na Moduły w Harmony będzie bezproblemo...
Pytania ?
Dziękuję !Mariusz Nowakmariusz@medikoo.com   @medikoo   github.com/medikoo
Upcoming SlideShare
Loading in …5
×

JavaScript, Moduły

1,866
-1

Published on

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,866
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript, Moduły

  1. 1. JavaScript, ModułyOrganizacja kodu pod serwer i przeglądarkę meetjs · Listopad 2011 · Warszawa
  2. 2. Mariusz Nowakmariusz@medikoo.com @medikoo github.com/medikooProgramista JavaScript w Roche Sp. z o.o.
  3. 3. PrzeglądarkaNa samym początku była przeglądarka.Organizacja kodu, jak to (przeważnie) wyglądało (?)
  4. 4. PrzeglądarkaNa samym początku była przeglądarka.Organizacja kodu, jak to (przeważnie) wyglądało (?)• Łączenie plików
  5. 5. PrzeglądarkaNapisanych mniej więcej tak:MAIN.module = (function() { var privateVar = ..; var privateMethod = function (args) { // ... }; return { publicProperty: .., publicMethod: function () { // ... } };}());
  6. 6. PrzeglądarkaNa samym początku była przeglądarka,Organizacja kodu, jak to (przeważnie) wyglądało (?)• Łączenie plików
  7. 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. 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. 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. 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. 11. SerwerGrupa CommonJS przygotowuje między innymi specyfikacjęmodułów. -> http://www.commonjs.org/specs/modules/1.0/
  12. 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. 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. 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. 15. SerwerJak to działa: // increment.js var add = require(./add); module.exports = function (val) { return add(val, 1); };
  16. 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. 17. SerwerWróćmy do wzorca Modułu.
  18. 18. SerwerWróćmy do wzorca Modułu.module.jsMAIN.module = (function() { var privateVar = ..; var privateMethod = function (args) { // ... }; return { publicProperty: .., publicMethod: function () { // ... } };}());
  19. 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. 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. 21. SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?
  22. 22. SerwerModuły CommonJS to bardzo udana specyfikacja.Co zyskujemy ?Przede wszystkim przejrzystość kodu i enkapsulacja nanajlepszym możliwym (w JavaScript) poziomie
  23. 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. 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. 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. 26. Serwer i PrzeglądarkaJak uruchomić tak napisany kod pod przeglądarką ?
  27. 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. 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. 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. 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. 31. Serwer i PrzeglądarkaNajciekawsze rozwiązania
  32. 32. Serwer i PrzeglądarkaNajciekawsze rozwiązaniaBrowserify -> https://github.com/substack/node-browserify
  33. 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. 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. 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. 36. Serwer i PrzeglądarkaAMD czyli Asynchronous Module Definition
  37. 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. 38. Serwer i PrzeglądarkaAMD ?
  39. 39. Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMD
  40. 40. Serwer i PrzeglądarkaAMD ?Zaprojektowane z myślą o przeglądarkach - Node.js nie obsłużymodułów AMD
  41. 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. 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. 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. 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. 45. Serwer i PrzeglądarkaDlaczego tak jest ?
  46. 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. 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. 48. Serwer i PrzeglądarkaJak wygląda AMD ?
  49. 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. 50. Serwer i PrzeglądarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wciągnięcia do przeglądarki ok 2000 liniikodu
  51. 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. 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. 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. 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. 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. 56. Serwer i PrzeglądarkaPodsumowanie:
  57. 57. Serwer i PrzeglądarkaPodsumowanie:Brakuje lekkiej i czystej implementacji modułów CommonJS(precyzyjniej modułów Node.js),
  58. 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. 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. 60. Serwer i PrzeglądarkaOstatecznie narodził się nowy projekt:
  61. 61. Serwer i PrzeglądarkaOstatecznie narodził się nowy projekt:modules-webmake ->https://github.com/medikoo/modules-webmakenpm install -g webmake
  62. 62. Modules Webmakemodules-webmake buduje drzewo zależności między modułami iwypluwa je jako jeden plik wykonywalny po stronie przeglądarki.
  63. 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. 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. 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. 66. Modules WebmakeJak wygląda wygenerowany plik ?
  67. 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. 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. 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. 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. 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. 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. 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. 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. 75. Modules WebmakeZmiany zaplanowane na najbliższą przyszłość:
  76. 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. 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. 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. 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. 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. 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. 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. 83. Przyszłość: HarmonyBędziemy mieli natywny silnik modułów w JavaScript.http://wiki.ecmascript.org/doku.php?id=harmony:modules_examples
  84. 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. 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. 86. Harmony Modules
  87. 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. 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. 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. 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. 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. 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. 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. 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. 95. Pytania ?
  96. 96. Dziękuję !Mariusz Nowakmariusz@medikoo.com @medikoo github.com/medikoo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×