Avancerad webbprogrammering sedan 1997 ERIK BERGLUND, LEKTOR The web browser is the opera8ng system Offline / Storage •  Web Storage •  Web SQL Database •  Applica8on Cache Webbapplika8onsutveckling Om webbutveckling RäH tänk om webb och applika8oner RäH tänk för kursens tekniska plaKorm Ni ska använda en rik8g och modern plaKorm Något ni skulle kunna bygga en egen, startup med … Egen erfarenhet av programmering är vik8gt inom IT Annars är man rökt kring 8dsbedömningar, kostnader, komplexitetsuppskaHning Copy/paste i kursen? •  “Vissa har tagit hundratals rader av kod från nätet vilket inte borde vara ok i en kurs som den här” –  Utvärderingskommentar 2014 •  Ingenjörskap vs. räHvisa (kunskapssyn) Tekniska krav i kursen •  En single page applica8on –  Webbapplika8on, ej webbsidor •  Webbapplika8onen ska implementeras i –  HTML, Javascript, CSS –  Bootstrap, jQuery, –  Python, Flask och Ajax. Tekniska krav i kursen •  Data I databas –  dynamisk skapas med python-­‐script på servern och för testning –  Utveckling och drif på olika maskiner •  Databasen måste hanteras med git (.gi8gnore) för aH undvika problem om en filbaserad databas som sqlite används •  Versionhantering för utveckling och drif via gitlab.ida.liu.se och openshif.ida.liu.se via git Teknisk för utvecklingsmetodik •  Git –  Hantering av •  Lokal utveckling, •  Branches •  Deployment –  Hantera er process med gemensam utveckling –  Hantera aH systmet kör mot olika databaser (skarp och lokal för utveckling) TIPS
•  Fler funk8oner är inte bäHre , –  räH funk8oner är bäHre –  Tänk efer, testa, skriv om, ta bort … •  Skriv bra kod –  Skriv om så koden blir bra –  Acceptera aH det inte blir bra direkt •  Ta eH steg I taget –  Långsik8g vision och första steget –  Planera nästa steg när ni nåH fram •  Lär er lagom mycket under denna kursen •  3 amigos of web JavaScript & DOM
•  What is DOM? HTML
Browser
HEAD
BODY
TITLE
DIV
H1
HTML File Code in file
P
DOM Tree Data structure in memory (Note: Each node of this tree can be access as a JavaScript Object)
18
JavaScript är inte som de andra barnen Applika8onen kör i webbläsaren Ladda applika8onen en gång Hämta/synka data mot backoffice 3.3 seconds window.onload 4.8 seconds 90% rendered 2.0 seconds 88% rendered 5.2 seconds window.onload We made the new plaqorm 60% faster and this resulted in a 14% increase in dona8on conversions. kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
Laddnings8der påverkar försäljning window.onload ≠ user percep8on Sauce OnDemand BACKEND microFRAMEWORKS Varför inte PHP? •  About CodeEval –  CodeEval is an exclusive community of over 24,000+ compe88ve developers. Members can compete with each other, challenge their friends and build out their profiles to showcase their coding skills. Get started on your first coding challenge here (there are over 129!) –  See more at: hHp://blog.codeeval.com/codeevalblog/
2014#.VLjU4mTF-­‐du= hHps://training.github.com/kit/downloads/github-­‐git-­‐cheat-­‐sheet.pdf •  Git-­‐uplägg (kurs … och annars) •  1 lokal version per utvecklare –  Tillfälliga branches för utveckling •  1 remote-­‐version för gruppen på gitlab.ida.liu.se •  1 remote-­‐version för drif på openshif.ida.liu.se •  Börja med en templet för Flask och openshif. •  Kod för uppsäHning och omstart av system •  Enhetstestning för aH godkänna drifsäHning •
•
•
•
•
•
add commit push/pull Branch merge remote add git –help gi8gnore! rhc -­‐-­‐help rhc tail