Alkalmazásfejlesztés a weben
Előadó Vadász László
- Honnan jön a web?
- Hogyan épül fel egy webkiszolgáló?
- Mi az, hogy kliens oldal?
- Natív vagy Webes alkalmazás?
- Mitől lesz alkalmazás egy weboldal?
- Mi az az SPA?
- Hogyan kezdjük?
- Merre tart a web?
Honnan jön a web?
Hogyan épül fel egy webkiszolgáló?
Szereplők
Kommunikációs csatornák
Mi az, hogy kliens oldal?
Futtató környzete - Böngésző
Egységes OS független platform.
"Határtalan lehetőségek"
- Egységes fejlesztői platform
- Egy nyelven programozható
- Egységes és bővülő API
- Gyorsan elsajátítható
- Jól átgondolt leíró nyelvek
Kötöttségek
- Rengeteg biztonsági megkötés
- Elérhetetelen OS szolgáltaltások
- Csak egy nyelven programozható
- Kompatibilitási problémák
HTML
A weboldalak struktúráját leíró nyelv
- Strukturális leírás a felhasználónak...
- ... és a gépi értelmezés számára (böngésző, robot, ...)
CSS
A weboldal megjelenését és formzását leíró nyelv
- Alapvető formázás (font, color, ...)
- Layout (position, float, ...)
- Méret skálázás (media query, felbontás független mértékegység)
- Animációk (keyframe, transition)
- Betűkészletek kezelése (@font)
- Összetett árnyékok és filterek (box-shadow, -webkit-filter, ...)
JavaScript
- Scriptnyelv
- Szintaxisa a Java-ra hasonlít
- Dinamikus
- Több paradigmát is támogat (OOP, Funkcionális, ...)
- Prototype alapú leszármaztatás
Natív vagy Webes alkalmazás?
Attól függ mi a cél!
- Nagyon gyors(?) futás
- Elérhetőek az OS szintű API-k
- Optimálisabban kihasználható HW
- App-store
- Offline jobban használható
- Gazdag UI komponens készlet
- Telepíteni kell
- Gyors futás
- Gyors fejlesztés
- Könnyen frissíthető
- SEO szempontból jobb
- Platform független
- Felbontástól független UI
- Böngésző kell
Mitől lesz alkalmazás egy weboldal?
HTML5?
- Gyűjtő fogalom a modern webre
- HTML5 + CSS3 + új JavaScript API-k
- = Web alkalmazás
Megjelenítés
- html + CSS
- Űrlap elemek (email, number, range, date,...)
- Animációk
Multimédia
- 2D: Canvas / SVG / MathML
- 3D: WebGL - Webgl water
- Video
- Audio
- Web audio API - Music
Offline használat
- Lokális adattárolás (Local/Session Storage, IndexedDB)
- Application cache
- Session history
- File API
Mobil
- Akkumulátor töltöttség
- GPS
- Szenzorok (Gyorsulásmérő, távolság érzékelő, ...)
- Kamera
Továbbá
- Web worker többszálú adatfeldolgozás
- Biztonság Same origin testreszabás
Mi az az SPA?
SPA - Single Page Application
Pro és Contra
- Különválik a back-end és a
front-end - Szerver terhelés csökken
- Minimális adatáramlás
- Újrahasznosítható szerver API
- Felhasználó élmény növelhető
- Komplex alkalmazások építhetők
- Nehézkes SEO
- Az alkalmazás indulás lassú lehet
- Modern böngésző szükséges IE9+
- Összetett kliens oldali kód
SPA keretrendszerek
Hogyan kezdjük?
Tudás
Legyünk nyitottak az újra
- Google a barátunk
- A Stackoverflow is
- További tudástárak
- Next-gen
Fejlesztés
A megfelelő eszköz megválasztása
- Egy jó böngésző Böngészők
- Okos szövegszerkesztők Notepad++, Sublime Test 3, Vi ...
- IDE Eclipse, NetBeams, WebStorm, Visual Studio
- Verziókezelő Git (GitHub), Subversion
- Tárhelyek: Heroku, OpenShift ...
Technológiák
A technológiát is mindig a céljaink szerint válasszuk
- Adatbázis
- SQL SQLite, MySQL, PostgreSQL
- NoSQL MongoDB, Redis
- Back-end
- Nobackend
- PHP, Java, C#, Python, Node.js,...?
- Vékony back-end, CMS, Framework, valami új?
- Front-end
- Jquery + pluginek
- Különböző keretrendszerek
Tesztelés
Nagyon fontos!
-
Scope
- Unit test back-end, front-end külön
- End-to-End test integrációs teszt
-
Front-end eszközök
- Teszt futtató környezet Karma Test Runner
- BDD teszt keretrendszer Jasmine
- End-to-End teszt Selenium
Merre tart a web?
- Gyorsuló szabványosítás / implementálás
- Modularizált CSS, HTML
- EcmaScript 6.0
- Mobileszközökön való elterjedés
Köszönöm a figyelmet
Kérdések?
