DVCS a Git

Trendy a doporučení při psaní JS

• Prezentace má charakter závazného doporučení
• "?" zobrazí krátkou nápovědu
• Tisk jako obvykle
• Pro pokračování stiskněte mezerník
• ondrej.zara@firma.seznam.cz

Obsah

1. Organizace kódu
2. JAK
3. ČUS
4. Návrhové vzory
5. Refactoring

Organizace kódu – míchání s HTML

• Slovníkování

  <script src="#{PATH_JS_LIB}/#{JS_FILE_CALENDAR}?#{VERSION}">

• Ruční výčet souborů
• Definice ve fragmentu bokem
  • Podpora ze strany aplikace
  • Čisté HTML
  • Balíčkování!

Organizace kódu – JS soubory

• Jeden soubor pro každou třídu
• Přehlednost, ladění
• UTF-8, Unix newlines, taby

Organizace kódu – v provozu

• kjscompress
• Google Closure Compiler
  • apt-get install closure-compiler
  • Lepší výsledky
  • Statická kontrola!

JAK

• Firemní sada JS knihoven
• Open-source, vyvíjeno společným úsilím na GitHubu
• Dbáme na praktickou stránku věci, nikoliv na to, jak moc je nástroj sexy

JAK – důvody pro existenci a používání

• Historické (vývoj započal v době, kdy nic jiného nebylo)
• Obsahové (funkce a widgety na míru našim potřebám)
• Pragmatické (maintenance, bugfixy, know-how)
• Koncepční (škálovatelnost, in-house, vanilla)
• Ostatní (žádné prasárny, podpora PBP, …)

ČUS

• Čitelnost
• Udržovatelnost
• Spolupráce

ČUS – Čitelnost

• Komentáře!
• Dodržování stylu projektu
• SRP – Single Responsibility Principle

ČUS – Udržovatelnost

• Tužka a papír
• Dokumentace
• Unit testy (pro komponenty JAKu)

ČUS – Spolupráce

• Code Reviews
• Problematice rozumí více webmasterů
• Oponentura k návrhům složitějších JS
• Konzultace, diskuze

Návrhové vzory

• Design patterns
• Ambice fungovat napříč jazyky
• Architektonická doporučení
  • Navrhnout stavbu komplexní JS aplikace fakt není prdel
  • Když se to začne hroutit, bývá pozdě
  • Zpětná analýza hotových řešení

Oddělení vizuální reprezentace od dat

• Jedna třída obalující data, jiná třída zastřešující vizuál
• Užitečné zejména může-li existovat více vizuálů naráz

• var user = new User({...});
  
  var icon1 = user.getLargeIcon();
  var icon2 = user.getSmallIcon();
  
  user.$destructor(); /* zruší všechny vizuály */
  

Návrhové vzory – hierarchie instancí

• Jednotlivé součásti aplikace vzájemně tvoří strom; kořenem je centrální objekt/instance
• Obrázek
• Částečná podoba s Composite pattern
• Strom aplikace leckdy koresponduje se stromem vizuální reprezentace (DOM)
• Věčná otázka cross-application komunikace

Návrhové vzory – jedináček

• Singleton
• Dva v jednom: jen jedna instance, centrální přístupnost

• var App = JAK.ClassMaker.makeSingleton({...});
  
  var app = App.getInstance(); // statická
  app.nejakaMetoda();
  

• Hlavní komponenta aplikace, logovač, databáze, reklamní servis, …

Návrhové vzory – tovární metody

• Factory method
• Když je objekt konstruovatelný více způsoby (překvapivě často!)

• Complex = function(???) { ... }
  Complex.fromRealImag = function(real, imag)  { /* matematika */ }
  Complex.fromPolar    = function(dist, angle) { /* matematika */ }

• Tovární metody bývají statické

Návrhové vzory – signály

• Pubsub, Observer
• Jako HTML události, ale jsou vysílány z našich objektů
• Volná vazba mezi spolupracujícími objekty

• Login.prototype._response = function() {
  	this.makeEvent("login-done");
  }
  
  App.prototype.$constructor = function() {
  	this.addListener("login-done", "_retrieveData");
  }
  

Refactoring

Refactoring

• Reorganizace kódu; vnitřní úpravy neovlivňující veřejné API
• Neoblíbená součást práce, protože nenese žádné viditelné ovoce
• Většina vývojářů se refactoringu přirozeně straní
• Běžná součást živnotního cyklu IS
• Ideální pro porozumění cizímu kódu

Refactoring – na co dát pozor

• Neexistuje typová kontrola
• Testovat lze zpravidla až po dokončení celého refactoringu
• Unit testy
• Search & replace (grep)

Prostor pro otázky