Your SlideShare is downloading. ×
Firefox OS presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Firefox OS presentation

234
views

Published on

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
234
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Unicsovics Milán milan.unicsovics@sztaki.mta.hu slideshare.net/thesnapdragon
  • 2. Okostelefon eladások a világon (%), forrás: Gartner
  • 3. 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?"
  • 4. 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
  • 5. Mozilla WebAPI: https://wiki.mozilla.org/WebAPI
  • 6. WebAPI példa
  • 7. WebUSB draft
  • 8. ● 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
  • 9. Manifest példa
  • 10. 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
  • 11. 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
  • 12. Böngészők részesedése, forrás: statcounter.com
  • 13. Partnerek
  • 14. Fejlesztői telefonok Geeksphone Keon Geeksphone Peak
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. Bootstrap példák #1
  • 24. Bootstrap példák #2
  • 25. Bootstrap példák #3
  • 26. 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
  • 27. 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)
  • 28. AngularJS GUI
  • 29. AngularJS üzleti logika
  • 30. AngularJS tesztelés
  • 31. Köszönöm a figyelmet! milan.unicsovics@sztaki.mta.hu slideshare.net/thesnapdragon
  • 32. 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)