Post on 14-Dec-2014
description
http://www.flickr.com/photos/garryknight/5621240253/
Scotty Logan Mark Branom !
!
!
Stanford Techie Festival 2012
Creating a Mobile Web App
http://www.flickr.com/photos/44456430@N04/6814917044/
Basic Tools Editor
Web Server (stanford.edu/~you)
Version Control (git)
Emulators (Android), Simulators (iOS)
Devices (iOS, Android)
Browsers (Chrome, Firefox, Safari)
http://www.flickr.com/photos/booleansplit/3055314411/
More Tools JS & CSS Minimizers / Compressors
CSS Meta tools
SASS, Less, Compass
Scaffolding
Testing
Automation
http://yeoman.io“a robust and
opinionated client-side stack, comprised of
tools and frameworks that can help
developers quickly build beautiful web
applications”
Firefox
Test Profiles:
firefox -ProfileManager
/Applications/Firefox.app/Contents/MacOS/firefox -ProfileManager
FireBug, Dust-me Selectors, YSlow
Chrome Incognito mode
Window Resizer
Developer tools
Google PageSpeed
Adobe Shadow
Chromium
Safari YSlow Extension
Safari Developer Menu
Internet Explorer?
Test with it, because people will use it
Our App
Department directory
...
IT Services doesn’t have staff photos
http://news.stanford.edu/news/2001/october3/nobel-103.html
Our App
Directory of Stanford’sNobel Laureates
Mobile Only App
Sencha Touch Toolkit
Model-View-Controller architecture
Javascript, CSS and HTML
http://sencha.com/products/touch/
Can build native apps!
Setup needed
http://en.wikipedia.org/wiki/Model–view–controller
Distributed Version Control System !
http://git-scm.com/ http://git-scm.com/book
Got Code?cardinal1 ~> cd WWW
> git clone -b 1_sencha \? http://github.com/scottylogan/nobeldir.git
Cloning into 'nobledir'......Receiving objects: ..., done.Resolving deltas: ..., done.
> cd nobeldir
> git status# On branch 1_senchanothing to commit (working directory clean)
First Version
> git checkout 2_senchaNobelSwitched to branch '2_senchaNobel'
> git diff 1_sencha 2_senchaNobel --name-only...app/controller/Application.jsapp/model/Laureate.jsapp/view/Laureates.js...laureates.json...resources/css/app.cssresources/images/headshots/Arrow_68.jpg...resources/images/photos/Arrow_180.jpg...
http://stanford.edu/~swl/nobeldir/ or
http://stanford.edu/~you/nobeldir/
Change Ordering
> git checkout 2_senchaNobelYearSwitched to branch '2_senchaNobelYear'
> git diff 2_senchaNobel 2_senchaNobelYear...--- a/app/store/Laureates.js+++ b/app/store/Laureates.js@@ -4,10 +4,10 @@ Ext.define('NobelDir.store.Laureates', { config: { model: 'NobelDir.model.Laureate', autoLoad: true,- sorters: 'year',+ sorters: 'displayCategory', grouper: { groupFn: function (record) {- return record.get('displayCategory');+ return record.get('year'); } }, proxy: {
Native Apps?
> git checkout 4_senchaNativeSwitched to branch '4_senchaNative'
> sencha package run ios.json...
> sencha package run android.json...
Are we done?
We need at least 2 apps
different frameworks for mobile vs non-mobile
What about “other” browsers?
TV?
Heavy!
18MB for our app, but can be 1.2MB
Time Travel
Mid 1990s
Simple web pages
Terrible tools
Windows Notepad and Netscape
vi and Mosaic
aka “Content First”
<!DOCTYPE html><html> <head> <title>Nobel Laureates</title> </head> <body> <article> <h1>Kenneth J. Arrow</h1> <img src=”images/Arrow_68.jpg”> <a href=”arrow.html”>Economics, 1972</a> </article> ... </body></html>
git checkout 5_basic
Desktop
Mobile
Mobile First
Set viewport: <meta name="viewport" content="width=device-width, initial-scale=1" />
Mobile... better
Theft, again I’m stealing from Brad Frost
@brad_frost !
http://www.html5rocks.com/en/mobile/responsivedesign/
CSS Breakpoints Default to narrow screen
Use em min-width @media queries to create breakpoints
27em ~= 400px
45em ~= 720px
60em ~= 960px
Inlining Images
while(<>) { if (/img src="([^:]*)">/) { $b = `base64 $1`; s#$1#data:image/jpg;base64,${b}#; } print $_;}