Rise of the responsive single page application
-
Upload
oren-shatken -
Category
Documents
-
view
2.856 -
download
1
description
Transcript of Rise of the responsive single page application
Rise of the Responsive Single Page Application
“2013 Is the Year of Responsive Web Design” - Mashable
Photo and Quote http://mashable.com/2012/12/11/responsive-web-design/
Design
What is Responsive Design?It’s not this:
http://netforbeginners.about.com/od/internet101/tp/How-Mobile-Web-Pages-Are-Different.htm
Trello: The Best Practice
• Use Media Queries• Everything is
accessible on every platform
• Even Navigation/Header is Responsive
http://blog.fogcreek.com/building-trello-com-for-multiple-devices/
Why Responsive?
• Better Experience– Unified across experiences (Don’t use iOS or
Android’s design patterns, use your own)– Mobile: in browser or app– Consistent URL structure– Single page – Pages are so 2000s– Mobile Users Don’t Need to Do Everything that
Web Users Need to Do – FALSE
Why Responsive?
• Better SEO– Decrease mobile bounce rate– Backlinks go to one site
• Better Deployment & Maintenance– Deploy once to multiple platforms– No (or less) versioning on API– Circumvent app stores on updates (Sometimes)– All content is in one place
Developing Responsively
The Good• One small, talented
team can deliver a lot• No one gets left out– Windows Phone– Blackberry
The Ugly• More design work
(target every screen size)
• Manage loading times• It’s hard
1.5x the work = 3-4x the reward
Technology
http://www.slideshare.net/finjonkiang/phonegap-jquerymobile
http://www.slideshare.net/finjonkiang/phonegap-jquerymobile
Javascript can get messy…
Google to the rescue!
a framework for single page applications
Used in Production
The Angular philosophy
• Decouple the client side of an app from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
• Decouple DOM manipulation from app logic.
• It is very helpful if the framework guides developers through the entire journey of building an app: from designing the UI, through writing the business logic, to testing.
http://www.slideshare.net/AgentK/angularjs-for-designers-and-developers
Our Dev Workflow
Speed up and improve development workflow by
• Enforcing code practices• Testing• Automating everything• Doing these things as early as possible
http://www.slideshare.net/DavidAm/gruntjs-and-yeoman-continous-integration
grunt server
Watch when files change then– Lint– Compile less to css– Compile html templates– Include development mocks– Reload the page
grunt build
Above + Minify +
grunt server:test
Above +
Our grunt workflow (346 lines)
• Point any browsers to the url
• Trigger tests in parallel