Unicsovics Milán
milan.unicsovics@sztaki.mta.hu
slideshare.net/thesnapdragon

Okostelefon eladások a világon (%), forrás: Gartner

Firefox OS
➵ Customer: "A friend told me I'm using a thing
called 'Linux'. What is it?"
➵ Tech Support: "An operating system."
➵ Customer: "Like Firefox right?"

Firefox OS
● egy mobil OS, mely a böngészőbe bootol be
● alacsony ár:
○ fejlődő országok ellátásának képessége
● 3 havonta frissülő főverzió
○ rendszerfrissítések telepítése over-the-air
● csak webes technológiák használata
○ meglévő webfejlesztési ismeretek használata
○ ~> natív alkalmazás használati élmény
○ write once, deploy everywhere

Mozilla WebAPI: https://wiki.mozilla.org/WebAPI

WebAPI példa

WebUSB draft

● app = bármely web alkalmazás + manifest
● publikálási lehetőségek:
○ hosted app
○ packaged app (.zip fájlban)
● packaged alkalmazások típusai:
○ plain
○ privileged
○ certified
Alkalmazások és a Firefox Marketplace

Manifest példa

Architektúra röviden
● Gonk: kernel + HAL
● Gecko: böngészőmotor
○ futtatókörnyezet (pl.: Javascript motor)
● Gaia: teljes felhasználói felület
○ ez is HTML, CSS, JS

Gecko
● nyílt forrású, többplatformos böngészőmotor
● Netscape később Mozilla fejlesztésében
● tartalmaz: networking stack, graphics stack,
renderelő motor,
JS virtuális gép

Böngészők részesedése, forrás: statcounter.com

Partnerek

Fejlesztői telefonok
Geeksphone Keon Geeksphone Peak

Első fecskék
Alcatel One Touch Fire
Méret: 114 x 62 x 12.5 mm
Kijelző: 320 x 480 pixel, 3.5
inch
Chipset: Qualcomm MSM7225A
Snapdragon
CPU: 1.0 GHz Cortex-A5
GPU: Adreno 200
Mem.: 512 MB ROM, 256 MB
RAM
Akkum.: Li-Ion 1200 mAh
ZTE Open

HTML5 és a mobil web
… I think the biggest mistake that we made, as a company,
is betting too much on HTML5 as opposed to native…
because it just wasn’t there.
Mark Zuckerberg, 2012

HTML5 és a mobil web
… I think the biggest mistake that we made, as a company,
is betting too much on HTML5 as opposed to native…
because it just wasn’t there.
Mark Zuckerberg, 2012
… And it's not that HTML5 is bad. I'm actually, on long-
term, really excited about it.
Mark Zuckerberg, 2012
People use this platform as the basis for tremendous
creativity. There's incredible innovation happening out
there, and people thinking of all kinds of amazing things, at
any moment.
Sir Tim Berners Lee, 2013

Workflow
● a szoftver minőségét a fejlesztés
folyamatának minősége határozza meg
● Yeoman: eszközkészlet és munkafolyamat
modern webalkalmazások fejlesztéséhez

Yeoman eszközkészlet
● Yo
○ scaffolding tool
○ sablon generátor
○ konfigurációs fájlok előállítása a fejlesztéshez
● Bower
○ dependency management tool
○ JS, CSS függőségek intelligens kezelése
● Grunt
○ task runner tool
○ preview: webszerver + live reload
○ test: egység, és integrációs tesztek futtatása
○ build: uglify, minify

Yo példák
# teljes frontend alkalmazás
$ yo webapp
# teljes Wordpress blog környezet
$ yo wordpress
# teljes AngularJS projekt
$ yo angular myapp
# AngularJS Controller
$ yo angular:controller myController
# AngularJS View
$ yo angular:view myView

Bower, Grunt példák
# Bower keresés, telepítés, update
$ bower search jquery
$ bower install jquery
$ bower update
# Grunt live reload server indítása
$ grunt server
# Grunt test
$ grunt test
# Grunt project build
$ grunt build

Responsive design
● sokféle felbontást használnak az eszközök
● elrendezés dinamikusan változik a
felbontástól függően
● Twitter Bootstrap
○ CSS keretrendszer
○ tipográfia, űrlapok, gombok, navigáció és egyéb
grafikus komponensek
○ opcionális JS kiegészítés

Bootstrap példák #1

Bootstrap példák #2

Bootstrap példák #3

AngularJS
● MVC Javascript keretrendszer a Google-től
● deklaratív programozás -> GUI
○ kétirányú adatkötés a HTML-lel -> modell alapján
automatikusan frissül a view
○ DOM-tól való függetlenség -> tesztelhetőség
● imperatív programozás -> üzleti logika
○ megvalósítás controller-ekben
○ backend: REST, JSONP

AngularJS #2
● meghatározza a fejlesztési munkafolyamatot
1. UI tervezése, deklaratív implementáció
2. Üzleti logika fejlesztése
3. Tesztelés
● egység, és integrációs tesztek:
○ Jasmine: viselkedés alapú tesztelést tesz lehetővé
○ DOM-tól független
○ tesztek futtatása automatikusan (TDD, BDD)

AngularJS GUI

AngularJS üzleti logika

AngularJS tesztelés

Köszönöm a figyelmet!
milan.unicsovics@sztaki.mta.hu
slideshare.net/thesnapdragon

Felhasznált anyagok
● http://www.slideshare.net/daf182 (Nagy Gergő)
● http://www.slideshare.net/matenadasdi1/firefox-os-weekend (Nádasdi
Máté)
● http://www.slideshare.net/janjongboom (Jan Jongboom)
● http://olavhn.github.io/shower/intro2.html (Olav Nymoen)
● http://www.slideshare.net/KAMI911 (Szalai Kálmán)
● http://slides.openjck.com/s/firefox-os/ (John Karahalis)