How To Develop A Responsive App Quickly With DivShot And Rails
Upcoming SlideShare
Loading in...5
×
 

How To Develop A Responsive App Quickly With DivShot And Rails

on

  • 3,207 views

http://www.intridea.com - these are the slides from the workshop by Tom and Brandon at Day of Foster.ly 2013.

http://www.intridea.com - these are the slides from the workshop by Tom and Brandon at Day of Foster.ly 2013.

Statistics

Views

Total Views
3,207
Views on SlideShare
2,979
Embed Views
228

Actions

Likes
0
Downloads
14
Comments
0

12 Embeds 228

http://www.intridea.com 165
http://feeds.feedburner.com 29
http://intridea-com.dev 8
http://newsblur.com 7
https://twitter.com 7
http://www.newsblur.com 2
http://dev.newsblur.com 2
http://news.google.com 2
http://pulpitum.intridea.com 2
http://localhost 2
http://reader.aol.com 1
http://lvh.me 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How To Develop A Responsive App Quickly With DivShot And Rails How To Develop A Responsive App Quickly With DivShot And Rails Presentation Transcript

  • Tom ZengDirector of Engineering@tomzengBrandon HunterUX/UI Designer@whitespase
  • Developer DesignerTom ZengDirector of EngineeringBrandon HunterUX/UI DesignerIntrideans:
  • WORKSHOPHow to develop a responsive appquickly with DivShot and Rails
  • OBJECTIVEQuickly and efficiently prototype a 3-pageresponsive web app built on Rails
  • Prototyping YesterdaySTATIC- Hand-rendered- Omnigraffle- Illustrator- PhotoshopDYNAMIC- Code it yourself- Dreamweaver- Adobe Muse
  • Prototyping YesterdayCONSENSUS:Static: Not ideal. No interaction. Not living in a responsive environment.Dynamic: Ideal. Steep learning curve for non-developers. Output at theprototyping stage closer to production quality.
  • Why?
  • Prototyping Responsively TodayTHINGS HAVE CHANGED:Twitter BootstrapFoundationRatchet
  • Relying on the Flexibility of FrameworksPROS- Best practices baked in- Final output can be usable- Fairly industry standard- Responsive worked outCONS- Steep learning curve- Not intuitive for non-devs- No visual editor
  • - A drag-and-drop web editor that outputs professional level code- Uses three of the most popular frameworks: Twitter Bootstrap,Foundation, and Ratchet- Caveat: Divshot is still in beta.Divshot
  • Wait!What is Rails? Rubies?
  • - Productive framework for web apps and services- Build more apps and better apps- Popular among startups and now enterprises- Programmer happiness leads to productivity and faster time-to-market- Mature(since 2005), “there’s a gem for that”Ruby on Rails
  • Client Side MVC Stack- HTML5/CSS3(Sass) / Twitter Bootstrap / Responsive Design / Divshot- CoffeeScript / JavaScript- Backbone.js / Ember.js- Template Engines (Mustache, eco, ejs)- D3, Highcharts, TileMill/MapBox- Jasmine (CS/JS testing)
  • Server Side Stack- Ruby/JRuby on Rails - web apps & services- Behavior Driven Development(BDD): RSpec + Cucumber- API Services for Client Side MVC (responsive)- Server Side MVC (search friendly)- NoSQL(Mongo) / SQL(Postgres) backend
  • Backbone Views
  • Backbone ViewsNAVFOOTER
  • Backbone Views - HomeHOME
  • Backbone Views - ScheduleSESSIONS
  • Backbone Views - AboutABOUT
  • CoffeeScript Code Sample
  • CoffeeScript Code Sample
  • CoffeeScript Code Sample
  • Find the first recordFind the last recordFind the record thathas ‘walt’ in titleQuery Data - Rails console/mongodb
  • Find the first recordFind the last recordFind the record by titleQuery Data - JavaScript console
  • Another Sample AppBackbone.js, CoffeeScript, Divshot, Bootstrap, Rails, MongoDB
  • Client Side MVC Resources- http://backbonejs.org/ Backbone- http://coffeescript.org/ CoffeeScript- http://www.divshot.com/ Divshot- http://twitter.github.io/bootstrap/ Twitter Bootstrap- http://sass-lang.com/ Sass/SCSS
  • Ruby on Rail Resources- http://rubyonrails.org/ Ruby on Rails- http://railscasts.com/ RailsCasts- http://ruby.railstutorial.org/ Rails Tutorial- http://www.codeschool.com/paths/ruby Code School- http://pragprog.com/categories/ruby_and_rails Pragmatic
  • Time to Build!Divshot UI & Working Prototype Demo
  • Thank You Gracias ありがとう Merci Danke 谢谢www.intridea.com