1. JavaScript, ModuyOrganizacja kodu pod serwer i przegldark meetjs Listopad 2011 Warszawa

2. Mariusz Nowakmariusz@medikoo.com @medikoo github.com/medikooProgramista JavaScript w Roche Sp. z o.o. 3. PrzegldarkaNa samym pocztku bya przegldarka.Organizacja kodu, jak to (przewanie) wygldao (?) 4. PrzegldarkaNa samym pocztku bya przegldarka.Organizacja kodu, jak to (przewanie) wygldao (?) czenie plikw 5. PrzegldarkaNapisanych mniej wicej tak:MAIN.module = (function() {var privateVar = ..; var privateMethod = function (args) { // ... }; return { publicProperty: .., publicMethod: function () { // ... } };}()); 6. PrzegldarkaNa samym pocztku bya przegldarka,Organizacja kodu, jak to (przewanie) wygldao (?) czenie plikw 7. PrzegldarkaNa samym pocztku bya przegldarka,Organizacja kodu, jak to (przewanie) wygldao (?) czenie plikw Wzorzec moduu (Module pattern) 8. SerwerPocztek roku 2009 Wiele dostpnych implementacji: Rhino, Spidermonkey, V8, JSCore Brak jasno okrelonych standardw Programici chc pisa moduy, ktre mog by uruchomione wdowolnej implementacji 9. SerwerPocztek roku 2009 Wiele dostpnych implementacji: Rhino, Spidermonkey, V8, JSCore Brak jasno okrelonych standardw Programici chc pisa moduy, ktre mog by uruchamiane wdowolnej implementacji Pojawia si potrzeba stworzenia podoa pod ekosystem podobny dotego jaki ma Python, Ruby czy Java 10. SerwerPocztek roku 2009 Wiele dostpnych implementacji: Rhino, Spidermonkey, V8, JSCore Brak jasno okrelonych standardw Programici chc pisa moduy, ktre mog by uruchamiane wdowolnej implementacji Pojawia si potrzeba stworzenia podoa pod ekosystem podobny dotego jaki ma Python, Ruby czy Java Powstaje grupa ServerJS, przemianowana pniej na CommonJS-> http://www.blueskyonmars.com/2009/01/29/what-server-side-javascript-needs/ 11. SerwerGrupa CommonJS przygotowuje midzy innymi specykacjmoduw. -> http://www.commonjs.org/specs/modules/1.0/ 12. SerwerGrupa CommonJS przygotowuje midzy innymi specykacjmoduw. -> 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 wicej w tym samym czasie powstaje Node.js, ktryimplementuje Moduy 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 wicej w tym samym czasie powstaje Node.js, ktryimplementuje Moduy 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 dziaa: // increment.js var add = require(./add); module.exports = function (val) { return add(val, 1); }; 16. SerwerJak to dziaa: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 zewntrznego moduu}, module = { exports: exports });MODULE = module.exports; 17. SerwerWrmy do wzorca Moduu. 18. SerwerWrmy do wzorca Moduu.module.jsMAIN.module = (function() {var privateVar = ..;var privateMethod = function (args) {// ...};return {publicProperty: ..,publicMethod: function () {// ...}};}()); 19. SerwerWzorzec moduu jako modu CommonJS:module.jsvar privateVar = ..;var privateMethod = function (args) {// ...};exports.publicProperty: ..,exports.publicMethod: function () {// ...};program.jsvar foobar = require(./module); 20. SerwerWzorzec moduu 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 odwoywa si do zacignitegomoduu. 21. SerwerModuy CommonJS to bardzo udana specykacja.Co zyskujemy ? 22. SerwerModuy CommonJS to bardzo udana specykacja.Co zyskujemy ?Przede wszystkim przejrzysto kodu i enkapsulacja nanajlepszym moliwym (w JavaScript) poziomie 23. SerwerModuy CommonJS to bardzo udana specykacja.Co zyskujemy ?Przede wszystkim przejrzysto kodu i enkapsulacja nanajlepszym moliwym (w JavaScript) poziomie Nie ma potrzeby tworzenia zbdnych wrapperw by pracowa wswoim zakresie zmiennych 24. SerwerModuy CommonJS to bardzo udana specykacja.Co zyskujemy ?Przede wszystkim przejrzysto kodu i enkapsulacja nanajlepszym moliwym (w JavaScript) poziomie Nie ma potrzeby tworzenia zbdnych wrapperw by pracowa wswoim zakresie zmiennych Nie toniemy w dugich przestrzeniach nazw - kady potrzebnyzewntrzny modu przypisujemy do lokalnej zmiennej 25. SerwerModuy CommonJS to bardzo udana specykacja.Co zyskujemy ?Przede wszystkim przejrzysto kodu i enkapsulacja nanajlepszym moliwym (w JavaScript) poziomie Nie ma potrzeby tworzenia zbdnych wrapperw by pracowa wswoim zakresie zmiennych Nie toniemy w dugich przestrzeniach nazw - kady potrzebnyzewntrzny modu przypisujemy do lokalnej zmiennej Moemy zbudowa du, zoon aplikacj, nie dotykajc globalnejprzestrzeni nazw 26. Serwer i PrzegldarkaJak uruchomi tak napisany kod pod przegldark ? 27. Serwer i PrzegldarkaJak uruchomi tak napisany kod pod przegldark ?Kiedy zainteresowaem si CommonJS oraz Node.js(pocztek 2011), byem przekonany, e ju istnieje solidnerozwizanie. 28. Serwer i PrzegldarkaJak uruchomi tak napisany kod pod przegldark ?Kiedy zainteresowaem si CommonJS oraz Node.js(pocztek 2011), byem przekonany, e ju istnieje solidnerozwizanie.Znalazem ok. 8-10 rozwiza prbujcych robi copodobnego, jednak adne nie byo satysfakcjonujce 29. Serwer i PrzegldarkaGwny problem polega na tym, e kade rozwizanieprbowao by czym wicej ni parserem zalenocimoduw CommonJS. 30. Serwer i PrzegldarkaGwny problem polega na tym, e kade rozwizanieprbowao by czym wicej ni parserem zalenocimoduw CommonJS.Sama implementacja parsera w kadym rozwizaniu, teniestety pozostawiaa wiele do yczenia. 31. Serwer i PrzegldarkaNajciekawsze rozwizania 32. Serwer i PrzegldarkaNajciekawsze rozwizaniaBrowserify -> https://github.com/substack/node-browserify 33. Serwer i PrzegldarkaNajciekawsze rozwizaniaBrowserify -> https://github.com/substack/node-browserifyBardzo ciekawe narzdzie jeli chcemy wykorzysta moduy dostarczanez Node.js. Browserify stara si umoliwi dziaanie takiego kodu postronie przegldarki - taki te by gwny zamys projektu 34. Serwer i PrzegldarkaNajciekawsze rozwizaniaBrowserify -> https://github.com/substack/node-browserifyBardzo ciekawe narzdzie jeli chcemy wykorzysta moduy dostarczanez Node.js. Browserify stara si umoliwi dziaanie takiego kodu postronie przegldarki - taki te by gwny zamys projektuDo dua ilo kodu, obsugujcego moduy po stronie przegldarki (ok.320 linii). 35. Serwer i PrzegldarkaNajciekawsze rozwizaniaBrowserify -> https://github.com/substack/node-browserifyBardzo ciekawe narzdzie jeli chcemy wykorzysta moduy dostarczanez Node.js. Browserify stara si umoliwi dziaanie takiego kodu postronie przegldarki - taki te by gwny zamys projektuDo dua ilo kodu, obsugujcego moduy po stronie przegldarki (ok.320 linii).Niestety nie radzi sobie z niektrymi ciekami (nie sczytuje moduw zzewntrznych pakietw ?) 36. Serwer i PrzegldarkaAMD czyli Asynchronous Module Denition 37. Serwer i PrzegldarkaAMD czyli Asynchronous Module DenitionOstatnio pojawio si wiele materiaw 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 PrzegldarkaAMD ? 39. Serwer i PrzegldarkaAMD ?Zaprojektowane z myl o przegldarkach - Node.js nie obsuymoduw AMD 40. Serwer i PrzegldarkaAMD ?Zaprojektowane z myl o przegldarkach - Node.js nie obsuymoduw AMD 41. Serwer i PrzegldarkaAMD ?Zaprojektowane z myl o przegldarkach - Node.js nie obsuymoduw AMDAMD ma nie wiele wsplnego z Moduami CommonJS, wymaga innejdyscypliny pisania kodu 42. Serwer i PrzegldarkaAMD ?Zaprojektowane z myl o przegldarkach - Node.js nie obsuymoduw AMDAMD ma nie wiele wsplnego z Moduami CommonJS, wymaga innejdyscypliny pisania kodu Wszystkie zalenoci deklarujemy na pocztku moduu 43. Serwer i PrzegldarkaAMD ?Zaprojektowane z myl o przegldarkach - Node.js nie obsuymoduw AMDAMD ma nie wiele wsplnego z Moduami CommonJS, wymaga innejdyscypliny pisania kodu Wszystkie zalenoci deklarujemy na pocztku moduuW moduach CommonJS moemy siga po zewntrzne moduy w dowolnym miejscu- podobnie bdzie w Harmony 44. Serwer i PrzegldarkaAMD ?Zaprojektowane z myl o przegldarkach - Node.js nie obsuymoduw AMDAMD ma nie wiele wsplnego z Moduami CommonJS, wymaga innejdyscypliny pisania kodu Wszystkie zalenoci deklarujemy na pocztku moduuW moduach CommonJS moemy siga po zewntrzne moduy w dowolnym miejscu- podobnie bdzie w Harmony Ponownie kady modu musimy owija funkcj deklarujc modu 45. Serwer i PrzegldarkaDlaczego tak jest ? 46. Serwer i PrzegldarkaDlaczego tak jest ?AMD prbuje rozwizywa dwa problemy: Modularyzacja/Organizacja kodu Dynamiczne dociganie zalenoci (na danie) 47. Serwer i PrzegldarkaDlaczego tak jest ?AMD prbuje rozwizywa dwa problemy: Modularyzacja/Organizacja kodu Dynamiczne dociganie zalenoci (na danie)Brzmi obiecujco, ale czy warto ? 48. Serwer i PrzegldarkaJak wyglda AMD ? 49. Serwer i PrzegldarkaJak wyglda 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 PrzegldarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wcignicia do przegldarki ok 2000 liniikodu 51. Serwer i PrzegldarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wcignicia do przegldarki ok 2000 liniikodu... tylko po to bymy mogli uruchomi waciwy kod 52. Serwer i PrzegldarkaNajpopularniejsza implementacja -> http://requirejs.org/wymaga od nas wcignicia do przegldarki ok 2000 liniikodu... tylko po to bymy mogli uruchomi waciwy kod... ktrego i tak bez kompilacji dodatkowym narzdziemnie bdziemy mogli wykorzysta po stronie serwera (wNode.js). 53. Serwer i PrzegldarkaOk, ale co z dynamicznym doadowywaniem zalenoci ?Taki jest przecie gwny cel i przyczyna zoonoci AMD. 54. Serwer i PrzegldarkaOk, ale co z dynamicznym doadowywaniem zalenoci ?Taki jest przecie gwny cel i przyczyna zoonoci AMD.Dynamiczne doadowywanie powinno si rozgrywa napoziomie funkcjonalnoci nie na poziomie moduw. 55. Serwer i PrzegldarkaOk, ale co z dynamicznym doadowywaniem zalenoci ?Taki jest przecie gwny cel i przyczyna zoonoci AMD.Dynamiczne doadowywanie powinno si rozgrywa napoziomie funkcjonalnoci nie na poziomie moduw.(takie jest przynajmniej moje zdanie ;) 56. Serwer i PrzegldarkaPodsumowanie: 57. Serwer i PrzegldarkaPodsumowanie:Brakuje lekkiej i czystej implementacji moduw CommonJS(precyzyjniej moduw Node.js), 58. Serwer i PrzegldarkaPodsumowanie:Brakuje lekkiej i czystej implementacji moduw CommonJS(precyzyjniej moduw Node.js),Implementacji, ktra nie prbuje dodatkowym kosztemrozwizywa innych problemw. 59. Serwer i PrzegldarkaPodsumowanie:Brakuje lekkiej i czystej implementacji moduw CommonJS(precyzyjniej moduw Node.js),Implementacji, ktra nie prbuje dodatkowym kosztemrozwizywa innych problemw.Kod wicy moduy powinien by minimalny, niezauwaalny wporwnaniu do kodu aplikacji. 60. Serwer i PrzegldarkaOstatecznie narodzi si nowy projekt: 61. Serwer i PrzegldarkaOstatecznie narodzi si nowy projekt:modules-webmake ->https://github.com/medikoo/modules-webmakenpm install -g webmake 62. Modules Webmakemodules-webmake buduje drzewo zalenoci midzy moduami iwypluwa je jako jeden plik wykonywalny po stronie przegldarki. 63. Modules Webmakemodules-webmake buduje drzewo zalenoci midzy moduami iwypluwa je jako jeden plik wykonywalny po stronie przegldarki.Obecna implementacja jest bardzo podstawowa, mona powiedziejestemy na starcie. 64. Modules Webmakemodules-webmake buduje drzewo zalenoci midzy moduami iwypluwa je jako jeden plik wykonywalny po stronie przegldarki.Obecna implementacja jest bardzo podstawowa, mona powiedziejestemy na starcie.Nie przeszkadza to jednak w budowaniu duych aplikacji, zoonychz kilkuset moduw, pochodzcych z kilkunastu pakietw(packagey) 65. Modules Webmakemodules-webmake buduje drzewo zalenoci midzy moduami iwypluwa je jako jeden plik wykonywalny po stronie przegldarki.Obecna implementacja jest bardzo podstawowa, mona powiedziejestemy na starcie.Nie przeszkadza to jednak w budowaniu duych aplikacji, zoonychz kilkuset moduw, pochodzcych z kilkunastu pakietw(packagey)Z modules-webmake ju teraz moecie budowa due, zooneaplikacje 66. Modules WebmakeJak wyglda wygenerowany plik ? 67. Modules WebmakeJak wyglda wygenerowany plik ?(function (modules) {// 53 linie kodu obsugujcego zalenoci})({ "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 wyglda wygenerowany plik ?(function (modules) {// 53 linie kodu obsugujcego zalenoci})({ "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");