Patryk JarMeet.js, Gdańsk 11 marca 2013 r.MODULARNY JAVASCRIPT
O mnie Patryk ‘yarpo’ Jar Programista JavaScript (nor-sta.eu) yarpo.pl  Wstęp / Chaos / Obiekty / Biblioteki / AMD / Po...
Agenda Chaos Obiekty Biblioteki AMD Podsumowanie Pytania  Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie ...
Dawno, dawno temu…                                                                       źródło grafiki: gadzetomania.pl W...
Początki JavaScript Brak „dobrych praktyk” dla modułów Traktowany jako banalny dodatek do HTML Słabe wsparcie ze strony...
Chaosfunction dodaj(a, b) { return a+b; }function odejmij (a, b) { return a-b; }<script src=obliczenia.js></script>  Wstęp...
Obiekty1. function Obliczenia() {2.    this.dodaj = function(a, b) { return a+b; };3.    this.odejmij = function(a, b) { r...
Problemy integracji kodu Różne źródła – różne koncepcje  programistyczne Konflikty nazw zmiennych globalnych   Global n...
Wzorzec modułu1. var app = {2.        utils : {3.             CONST: 42 // to nadal tylko zmienna4.        },5.        aja...
Biblioteki Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania   10
jQuery: $(‘future’)$(div).hide().parent().css(color, red);jQuery.ajax({ … }); // $ === jQuery+ Nie zanieczyszczamy przestr...
Dotychczasowy kod HTML<html><head>      <title>Robisz to źle</title>      <script src="jquery/1.7.1/jquery.min.js"></scrip...
Trochę lepszy kod<html><head>  <title>Robisz to trochę lepiej;)</title>  <script src="all.compressed.js"></script>  <link ...
dojo.declare: ¿¡klasy w JS?!1. // plik `yarpo/MyFirstClass.js’2. dojo.provide("yarpo.MyFirstClass");3. dojo.require("yarpo...
dojo.declare+ Czytelne i podobne do znanych rozwiązań+ Prawie samowystarczalne (CSS)+ Przyjemne i kompletne- Uzależnienie ...
Użyjmy niezależnego API! Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania   16
Nowe sposoby na moduły AMD – Asynchronous Module Definition   Dojo 1.7+   jQuery 1.7+                                  ...
AMD – przykład: quick start1.      // plik ‘moduly/Obliczenia.js’2.      define(moduly/Obliczenia, function() {3.        r...
AMD – przykład 2: zależności1. define(moduly/Obliczenia, [mat/dodaj, mat/odejmij],2.     function(dodaj, odejmij) {3.     ...
AMD – wtyczki Szablony widgetów, pliki txt   dojo/text!sciezka/do/pliku Pliki językowe   dojo/i18n!nls/nazwaModuluI18n...
AMD – wady: kolejność1. define(tct/DetailsPanel, [2.       "dojo/_base/declare",3.       "dijit/_TemplatedMixin",4.       ...
AMD – wady: nazwy1. define(tct/DetailsPanel, [2.       "dojo/_base/declare",3.       "dijit/_TemplatedMixin",4.       "doj...
AMD – zalety Lokalny (nie brudzimy globalnej przestrzeni) Samowystarczalny (sam definiuje, jakie  moduły muszą być pobra...
AMD – zalety: kompresjadefine("dojo/cookie",["./_base/kernel","./regexp    "],function(_1,_2){_1.cookie=function(_3,_4,_  ...
Podsumowanie Aktualny kierunek: uniwersalne API modułów Moduł vs. Biblioteka Przyszłość: ECMAScript Harmony Alternatyw...
Pytania Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania   26
Dziękuję za uwagę yarpo.pl Jar.Patryk@gmail.com                         27
Upcoming SlideShare
Loading in …5
×

Modularny JavaScript - meet.js

769 views

Published on

Prezentacja przygotowana przez Patryka yarpo Jara na pierwsze meet.js w Gdańsku 11 marca 2013 r.

Dotyczy modularnego JS

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
769
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Modularny JavaScript - meet.js

  1. 1. Patryk JarMeet.js, Gdańsk 11 marca 2013 r.MODULARNY JAVASCRIPT
  2. 2. O mnie Patryk ‘yarpo’ Jar Programista JavaScript (nor-sta.eu) yarpo.pl Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 2
  3. 3. Agenda Chaos Obiekty Biblioteki AMD Podsumowanie Pytania Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 3
  4. 4. Dawno, dawno temu… źródło grafiki: gadzetomania.pl Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 4
  5. 5. Początki JavaScript Brak „dobrych praktyk” dla modułów Traktowany jako banalny dodatek do HTML Słabe wsparcie ze strony przeglądarek  Rozbieżności  Wolne silniki Ni to „Java”, ni to „Script”  D. Crockford: „ The Worlds Most Misunderstood Programming Language” Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 5
  6. 6. Chaosfunction dodaj(a, b) { return a+b; }function odejmij (a, b) { return a-b; }<script src=obliczenia.js></script> Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 6
  7. 7. Obiekty1. function Obliczenia() {2. this.dodaj = function(a, b) { return a+b; };3. this.odejmij = function(a, b) { return a-b; };4. };5. var obl = new Obliczenia();6. console.log(obl.dodaj(2,2)); // = 4 Zobacz: tnij.org/obiekty-js Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 7
  8. 8. Problemy integracji kodu Różne źródła – różne koncepcje programistyczne Konflikty nazw zmiennych globalnych  Global namespace pollution Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 8
  9. 9. Wzorzec modułu1. var app = {2. utils : {3. CONST: 42 // to nadal tylko zmienna4. },5. ajax : {6. get : function(id) { … },7. add : function() { … }8. }9. };10. app.ajax.get(app.utils.CONST); Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 9
  10. 10. Biblioteki Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 10
  11. 11. jQuery: $(‘future’)$(div).hide().parent().css(color, red);jQuery.ajax({ … }); // $ === jQuery+ Nie zanieczyszczamy przestrzeni globalnej+ Tworzymy wtyczki (moduły)- Nadal globalnie załączamy pliki z kodem- „$ namespace pollution” (jQuery.noConflict())- „Programista jQuery” często nie zna JavaScript Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 11
  12. 12. Dotychczasowy kod HTML<html><head> <title>Robisz to źle</title> <script src="jquery/1.7.1/jquery.min.js"></script> <script src="pluginA.jquery.js"></script> <script src="pluginB.jquery.js"></script> <script src="logic.js"></script> <script src="dojo.js"></script> <link rel="stylesheet" type="text/css" href="all.css"> <script src="stillNotEnoughJSFiles.js"></script> <link rel="stylesheet" type="text/css" href="style.css">... Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 12
  13. 13. Trochę lepszy kod<html><head> <title>Robisz to trochę lepiej;)</title> <script src="all.compressed.js"></script> <link rel="stylesheet" type="text/css" href="all-styles.merged.css"> Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 13
  14. 14. dojo.declare: ¿¡klasy w JS?!1. // plik `yarpo/MyFirstClass.js’2. dojo.provide("yarpo.MyFirstClass");3. dojo.require("yarpo.Xyz"); // pobiera yarpo/Xyz.js4. dojo.require("yarpo.Abc"); // pobiera yarpo/Abc.js5. dojo.declare("yarpo.MyFirstClass", [yarpo.Xyz], {6. constructor : function(a, b) {7. console.log("działam", a, b);8. var abc = new yarpo.Abc();9. //this.inherited(arguments);10. }11. });12. var obj = new yarpo.MyFirstClass(1, 2); // „działam 1 2” Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 14
  15. 15. dojo.declare+ Czytelne i podobne do znanych rozwiązań+ Prawie samowystarczalne (CSS)+ Przyjemne i kompletne- Uzależnienie od Dojo Toolkit Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 15
  16. 16. Użyjmy niezależnego API! Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 16
  17. 17. Nowe sposoby na moduły AMD – Asynchronous Module Definition  Dojo 1.7+  jQuery 1.7+ Zobacz: RequireJS.org  Mootools 2.0+  Node.js CommonJS  Node.js Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 17
  18. 18. AMD – przykład: quick start1. // plik ‘moduly/Obliczenia.js’2. define(moduly/Obliczenia, function() {3. return function() {4. this.dodaj = function(a, b) { return a + b; };5. this.odejmij = function(a, b) { return a - b; };6. };7. });8. require([moduly/Obliczenia], function(Obliczenia) {9. var obliczenia = new Obliczenia();10. console.log(obliczenia.dodaj(2,2)); // 411. }); Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 18
  19. 19. AMD – przykład 2: zależności1. define(moduly/Obliczenia, [mat/dodaj, mat/odejmij],2. function(dodaj, odejmij) {3. return function() {4. this.dodaj = function(a, b) { return dodaj(a, b); }5. this.odejmij = function(a,b){ return odejmij(a, b); }6. };7. });1. // plik ‘mat/dodaj.js’2. define(mat/dodaj, function() {3. return function(a, b) { return a+b; };4. }); Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 19
  20. 20. AMD – wtyczki Szablony widgetów, pliki txt  dojo/text!sciezka/do/pliku Pliki językowe  dojo/i18n!nls/nazwaModuluI18n  Język ustalony per aplikacja Style CSS  xstyle!./sciekza/do/pliku.css  github.com/kriszyp/xstyle Zobacz: requirejs.org/docs/plugins.html Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 20
  21. 21. AMD – wady: kolejność1. define(tct/DetailsPanel, [2. "dojo/_base/declare",3. "dijit/_TemplatedMixin",4. "dojo/i18n!./nls/DetailsPanel"],5. function(6. declare,7. template,8. _TemplatedMixin) {9. return declare("tct.DetailsPanel", [_TemplatedMixin],10. function() { ... }); Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 21
  22. 22. AMD – wady: nazwy1. define(tct/DetailsPanel, [2. "dojo/_base/declare",3. "dijit/_TemplatedMixin",4. "dojo/i18n!./nls/DetailsPanel",5. "dojo/text!./templates/detailsPanel.html"],6. function(7. deklarowanie,8. templejt,9. a,10. template) {11. return deklarowanie("tct.DetailsPanel", [templejt], fun... }); Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 22
  23. 23. AMD – zalety Lokalny (nie brudzimy globalnej przestrzeni) Samowystarczalny (sam definiuje, jakie moduły muszą być pobrane)  Szablony widgetów, pliki txt (np. `dojo/text!`)  Pliki językowe (np. `dojo/i18n!`)  Pliki stylów CSS! (github.com/kriszyp/xstyle) Uniwersalny (define.amd == true) Dobrze się kompresuje (np. Shrinksafe) Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 23
  24. 24. AMD – zalety: kompresjadefine("dojo/cookie",["./_base/kernel","./regexp "],function(_1,_2){_1.cookie=function(_3,_4,_ 5){var c=document.cookie,_6;if(arguments.length= =1){var _7=c.match(new RegExp("(?:^|; )"+_2.escapeString(_3)+"=([^;]*)"));_6=_7?de codeURIComponent(_7[1]):undefined;}else{_ 5=_5||{};var _8=_5.expires;if(typeof _8=="number"){... Zobacz: shrinksafe.dojotoolkit.org Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 24
  25. 25. Podsumowanie Aktualny kierunek: uniwersalne API modułów Moduł vs. Biblioteka Przyszłość: ECMAScript Harmony Alternatywa: Asemblaryzacja JavaScript  Google Web Toolkit  Cappucino (cappuccino-project.org)  CoffeScript (coffeescript.org)  TypeScript (typescriptlang.org)  Poniekąd jQuery Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 25
  26. 26. Pytania Wstęp / Chaos / Obiekty / Biblioteki / AMD / Podsumowanie / Pytania 26
  27. 27. Dziękuję za uwagę yarpo.pl Jar.Patryk@gmail.com 27

×