make web as webapp
DESCRIPTION
Talk in GTUG Taipei 2013/5/9. There's some work to make web as webapp. The slide addressed the extra steps for existing web site, and suggest some tools and guide for newly developed website. webapplate http://github.com/gasolin/webapplate FxOSBMI https://github.com/gasolin/FxOSBMITRANSCRIPT
Make web as webapplets design web as app
Google Reader
Web sites are capableAnd can act as App
WebAppMozilla proposed standard to
Make web act as app
Current Platforms support WebApp standard:
● Desktop Firefox (Win, Mac, Linux)● Firefox for Mobile (Android)● Firefox OS
Contact Calendar
HTML5 + WebAPIWeb is the platform
Enhanced web experience
HTML5
HTML5 Support APIshttps://developer.mozilla.org/docs/HTML/HTML5
WebAPIin-progress standards to facilitate
web capability
Firefox supported WebAPIhttps://developer.mozilla.org/en-US/docs/WebAPI
Approachs● Make it run● Make it good
Make it Run● Enable Web Sites as Apps● MarketPlace
1. Web Sites are Apps網頁即應用
webapp types
● Hosted webapp● Packaged webapp
Hosted webapp (dynamic or static)
● turn website into webapp● use offline appcache for no internet usage
Packaged webapp (no server)
● Package files in .zip● Support more features with Permisions● No internet required
http://mzl.la/TUxIY3
Summary: Steps to hosted webapp
● Dev web app using HTML, CSS & Javascript● Create an webapp manifest file● publish/install the app on public domain
● https://marketplace.firefox.com/developers/● MDN http://mzl.la/Szsehb
webapp structure
MyApp● maniest.webapp● index.html● js● style
○ icons■ icon128.png
index.html
<html><body>Hello World!</body></html>
icon128.png
manifest.webapp{ "name": "MyApp", "description": "Hello World!", "launch_path": "/index.html", "developer": { "name": "gasolin", "url": "https://gasolin.idv.tw" }, "permissions": [ "contacts" ], "icons": { "128": "/style/icons/icon128.png" }}
Setup
Preview (new desktop icon)
Preview (app screen)
That is not APP!
let's move to the next stage
Make it Good● Provide Develop Tools● Provide Develop Guidelines
2. Applify the webdesign your web as app
http://mzl.la/V0MavA
Expect for App experience
1. Just fit specific need2. Slick UI3. Fast4. Stable5. Works without internet6. Use mobile features
It might means...
● Design matters● UI matters● Fast loadtime (< 1s)● Maintenable (Testable)● Offline appcache● WebAPI
How do I start?in practice
It might means...
● Design matters● UI matters● Fast loadtime (< 1s)● Maintenable (Testable)● Offline appcache● WebAPI
UI Demoshttps://marketplace.firefox.com/app/ui-demos/
It might means...
● Design matters● UI matters● Fast loadtime (< 1s)● Maintenable (Testable)● Offline appcache● WebAPI
WebApplate
● Best practices for new webapp development● Contain dev server, web templates, test
framework, help tools, deploy instructions
http://github.com/gasolin/webapplate
WebApplate Features
● support hosted & packaged webapp development
● Speedy default server/client side configurations
● autotest & offline appcache generator
http://github.com/gasolin/webapplate
Download from github
● https://github.com/gasolin/webapplate
or
● https://github.com/gasolin/FxOSBMI (example with Firefox OS UI building block)
Setup
Need Node.js installed
update modules:# npm install
start server:$ node app.js
open localhost:8000
Client side test in browser
Help Tools
$ grunt
Deploy
in github:git push origin gh-pages
in appfog:af update <myapp>
in heroku:git push heroku master
It might means...
● Design matters● UI matters● Fast loadtime (< 1s)● Maintenable (Testable)● Offline appcache● WebAPI
Firefox OS API Boilerplatehttps://github.com/robnyman/Firefox-OS-Boilerplate-App
Resources
Developer Hub https://marketplace.firefox.com/developers/
Examples● FirefoxOS-boilerplate http://bit.ly/WAFLoe● FxOSBMI http://bit.ly/ZppWEA
Webapp Template● webapplate http://bit.ly/13sLd5j