HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012
-
Upload
matt-raible -
Category
Technology
-
view
27.869 -
download
3
description
Transcript of HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012
![Page 1: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/1.jpg)
Photos by Trish - http://mcginityphoto.com
with Play Scala, CoffeeScript and Jade
Matt Raiblehttp://raibledesigns.com
![Page 2: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/2.jpg)
© 2012 Raible Designs
Introductions
‣ Have you used HTML5?‣ Have you used Play
Framework?‣ Have you tried Scala?‣ Tried CoffeeScript?‣ Scalate or Jade?
2
![Page 3: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/3.jpg)
© 2012 Raible Designs
Blogger on raibledesigns.com
Founder of AppFuse
Father, Skier, Cyclist
Web Framework Connoisseur
Who is Matt Raible?
![Page 4: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/4.jpg)
© 2012 Raible Designs
Agenda
4
‣ Introductions‣ Why am I doing this talk?‣ What are these technologies?‣ My Development Experience‣ Demo‣ Q and A‣ Conclusion
![Page 5: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/5.jpg)
© 2012 Raible Designs
Why am I doing this talk?
5
![Page 6: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/6.jpg)
© 2012 Raible Designs
Why ÜberConf?
6
![Page 7: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/7.jpg)
© 2012 Raible Designs
Why am I doing this talk?
7
![Page 8: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/8.jpg)
© 2012 Raible Designs
Why am I doing this talk?
8
‣ I like a Challenge to...- Learn Scala
- Via Play!
- And Jade is cool too!
- So is CoffeeScript!
![Page 9: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/9.jpg)
© 2012 Raible Designs
Why am I doing this talk?
9
‣ Honestly, it’s because of James Strachan...
![Page 10: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/10.jpg)
© 2012 Raible Designs
Why am I doing this talk?
10
![Page 11: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/11.jpg)
© 2012 Raible Designs
What are these technologies?
11
![Page 12: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/12.jpg)
© 2012 Raible Designs
HTML5
12http://on.wsj.com/tEGIJL
![Page 13: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/13.jpg)
© 2012 Raible Designs
How do you write HTML5?
<!DOCTYPE html>
13
<article> <aside> <section><header> <footer> <nav><audio> <canvas> <video><datalist> <details>
http://www.w3schools.com/html5/html5_reference.asp
<applet> <center> <font><frame> <frameset>
![Page 14: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/14.jpg)
© 2012 Raible Designs
CSS3
‣ Animated Transitions‣ Rounded Corners‣ Drop Shadows‣ Gradient Colors‣ Styling based on sibling count‣ More cursors for better usability‣ Custom Checkboxes and Radio Buttons
14
http://lea.verou.me/css3-secrets
transform: rotateY(180deg);
border-radius: 8px 8px 0 0;
box-shadow: 2px 2px 4px 4px;
![Page 15: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/15.jpg)
© 2012 Raible Designs
Play Framework
‣ A full-stack Java Web Framework made by Web Developers
‣ Compile on-the-fly‣ Stateless Architecture‣ Breaks web framework norms
- Uses static methods
- Doesn’t use Servlet API
15
![Page 16: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/16.jpg)
© 2012 Raible Designs
Matrix Results
0
4.5
9
13.5
18Gr
ails
Sprin
gRa
ilsGW
TVa
adin
Wick
etTa
pestr
ySt
ruts
2St
ripes Play
Flex
JSF Lift
11.513.513.5141414.5151515.5
17171717.5
16
![Page 17: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/17.jpg)
© 2012 Raible Designs
Weighted Results
‣ Grails (90)‣ Spring MVC (85)‣ Ruby on Rails (82.5)‣ Vaadin (82.5)‣ Play (82.5)‣ GWT (80)
17
![Page 18: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/18.jpg)
© 2012 Raible Designs
Mailing List Traffic
Wicket
GWT
Grails
Rails
Tapestry
Play
0 475 950 1425 1900
1451
1538
1604
1635
1753
1841
July 2011* Spring MVC and Vaadin use Forums, which don’t provide this data.
18
![Page 19: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/19.jpg)
© 2012 Raible Designs
Play Scala
19
But really, it’s more like this
![Page 20: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/20.jpg)
© 2012 Raible Designs
Play Scala
20
![Page 21: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/21.jpg)
© 2012 Raible Designs
Scala
“Scala is like the dragon in Avatar. It will try to kill you, but if you master it, you can fly great distances
with it and have a wonderful time.”
-- Venkat Subramaniam
21
![Page 22: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/22.jpg)
© 2012 Raible Designs
Scala Basics‣ def starts a method
‣ variables are started with var or val‣ variables are defined with name:type ‣ semicolons are not required
22
![Page 23: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/23.jpg)
© 2012 Raible Designs
Scala vs. Java
23
![Page 24: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/24.jpg)
© 2012 Raible Designs
Play with Scala
24
![Page 25: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/25.jpg)
© 2012 Raible Designs
Learning Scala
‣ Venkat’s Scala for the Intrigued- PragPub Magazine, starting in Sep 2011
‣ Scala for the Impatient - Cay Horstmann‣ Programming in Scala, 2nd Edition - Martin
Odersky, Lex Spoon, and Bill Venners‣ Twitter’s Scala School
25
![Page 26: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/26.jpg)
© 2012 Raible Designs
CoffeeScript
26
![Page 27: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/27.jpg)
© 2012 Raible Designs
JavaScript: The Good Parts
27
![Page 28: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/28.jpg)
© 2012 Raible Designs
Jade
28
![Page 29: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/29.jpg)
© 2012 Raible Designs
Jade Example
29
![Page 30: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/30.jpg)
© 2012 Raible Designs
My Development Experience
30
![Page 31: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/31.jpg)
© 2012 Raible Designs
Getting Started
31
![Page 32: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/32.jpg)
© 2012 Raible Designs
Developing with Play Scala
32
![Page 33: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/33.jpg)
© 2012 Raible Designs
Tools I started with...
33
![Page 34: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/34.jpg)
© 2012 Raible Designs
Scalate Module
34
![Page 35: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/35.jpg)
© 2012 Raible Designs
Scalate Integration Solution
35
![Page 36: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/36.jpg)
© 2012 Raible Designs
Integrating Scalate with Play
36
play deps --sync
![Page 37: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/37.jpg)
© 2012 Raible Designs
Integrating Scalate with Play
37
![Page 38: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/38.jpg)
© 2012 Raible Designs
Integrating Scalate with Play
38
![Page 39: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/39.jpg)
© 2012 Raible Designs
Cannot start in PROD mode with errors Template compilation error (In /app/views/Application/index.jade around line 2) The template /app/views/Application/index.jade does not compile : #{user.name} is not closed. play.exceptions.TemplateCompilationException: #{user.name} is not closed. at play.templates.TemplateCompiler.generate(TemplateCompiler.java:102) at play.templates.TemplateCompiler.compile(TemplateCompiler.java:15) at play.templates.GroovyTemplateCompiler.compile(GroovyTemplateCompiler.java:4 1)
http://blog.heroku.com/archives/2011/8/29/play/
![Page 40: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/40.jpg)
© 2012 Raible Designs
Integrating Scalate with Play
40
http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with
![Page 41: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/41.jpg)
© 2012 Raible Designs
Play 2.0
41
![Page 42: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/42.jpg)
© 2012 Raible Designs
Play 2.0
42
![Page 43: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/43.jpg)
© 2012 Raible Designs
Play 2.0
43
![Page 44: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/44.jpg)
© 2012 Raible Designs
Play 2.0 Beta
44
http://raibledesigns.com/rd/entry/play_2_0_a_web
![Page 45: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/45.jpg)
© 2012 Raible Designs
A Nice Break ...
45
![Page 46: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/46.jpg)
© 2012 Raible Designs
CoffeeScript with Play
46
![Page 47: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/47.jpg)
© 2012 Raible Designs
CoffeeScript with Play
47
http://raibledesigns.com/rd/entry/trying_to_make_coffeescript_work
![Page 48: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/48.jpg)
© 2012 Raible Designs
My Development Experience
48
![Page 49: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/49.jpg)
© 2012 Raible Designs
![Page 50: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/50.jpg)
© 2012 Raible Designs
H5BP and Play
50
cd $boilerplate-downloadcp 404.html ~/dev/play-more/app/views/errors/404.htmlcp *.png ~/dev/play-more/public/.cp crossdomain.xml ~/dev/play-more/public/.cp -r css ~/dev/play-more/public/stylesheets/.cp favicon.ico ~/dev/play-more/public/.cp humans.txt ~/dev/play-more/public/.cp -r js/libs ~/dev/play-more/public/javascripts/.cp robots.txt ~/dev/play-more/public/.
![Page 51: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/51.jpg)
© 2012 Raible Designs
Scalate Layouts
51
![Page 52: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/52.jpg)
© 2012 Raible Designs
HTML5 Boilerplate
52
http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate
![Page 53: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/53.jpg)
© 2012 Raible Designs
HTML5 Development
53
![Page 54: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/54.jpg)
© 2012 Raible Designs
StopWatch with Coffee
54
![Page 55: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/55.jpg)
© 2012 Raible Designs
Jade Template for Watch
55
![Page 56: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/56.jpg)
© 2012 Raible Designs
HTML5 Development
56
![Page 57: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/57.jpg)
© 2012 Raible Designs
HTML5 Geo API
57
![Page 58: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/58.jpg)
© 2012 Raible Designs
Google Maps JS API
58
![Page 59: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/59.jpg)
© 2012 Raible Designs
Jade View for Map
59
![Page 60: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/60.jpg)
© 2012 Raible Designs
HTML5 Development
60
![Page 61: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/61.jpg)
© 2012 Raible Designs
Odometer
61
![Page 62: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/62.jpg)
© 2012 Raible Designs
Testing
62
‣ Tried Trip Meter on a bike ride‣ Said I’d traveled 5 km, when I knew I’d gone 10
- Was calculating start to end w/o waypoints
‣ To Visualize: integrated odometer with maps using Google Maps Polylines
![Page 63: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/63.jpg)
© 2012 Raible Designs
Discovered
63
‣ HTML5 Geolocation was highly inaccurate- Fixed by passing {enableHighAccuracy: true} to
navigator.geolocation.watchPosition()
![Page 64: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/64.jpg)
© 2012 Raible Designs
Discovered
64
![Page 65: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/65.jpg)
© 2012 Raible Designs
Show Stopper?
65
‣ Geolocation doesn’t run in the background
![Page 66: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/66.jpg)
© 2012 Raible Designs
Making it look good
66
![Page 67: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/67.jpg)
© 2012 Raible Designs
Twitter’s Bootstrap
67
![Page 68: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/68.jpg)
© 2012 Raible Designs
Bootstrap
68
![Page 69: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/69.jpg)
© 2012 Raible Designs
LESS
69
![Page 70: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/70.jpg)
© 2012 Raible Designs
LESS
70
![Page 71: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/71.jpg)
© 2012 Raible Designs
CSS3 Media Queries
71
![Page 72: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/72.jpg)
© 2012 Raible Designs
HTML5 Features
‣ Geolocation‣ CSS 3‣ Audio‣ History‣ Local Storage‣ Canvas
72
![Page 73: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/73.jpg)
© 2012 Raible Designs
HTML5 and Bootstrap
73
http://raibledesigns.com/rd/entry/developing_with_html5_coffeescript_and
![Page 74: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/74.jpg)
© 2012 Raible Designs
Anorm and PostgreSQL
74
‣ I’m a big fan of ORMs like Hibernate and JPA- Learn a new JDBC abstraction? Really!?
‣ Anorm is and will be the default for Play Scala‣ Chose PostgreSQL since that’s what Heroku uses
![Page 75: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/75.jpg)
© 2012 Raible Designs
Data Model
75
![Page 76: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/76.jpg)
© 2012 Raible Designs
ScalaTest
76
![Page 77: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/77.jpg)
© 2012 Raible Designs
Anorm in Action
77
![Page 78: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/78.jpg)
© 2012 Raible Designs
Controller and View
78
![Page 79: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/79.jpg)
© 2012 Raible Designs
Anorm, Dates & PostgreSQL
79
![Page 80: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/80.jpg)
© 2012 Raible Designs
‣ Discovered “support of Date for insertion” was added to Anorm in August 2011
‣ Cloned play-scala, built locally and uploaded‣ Modified dependencies.yml to use new version
Anorm, Dates & PostgreSQL
80
![Page 81: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/81.jpg)
© 2012 Raible Designs
Anorm and PostgreSQL
81
http://raibledesigns.com/rd/entry/play_scala_s_anorm_heroku
![Page 82: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/82.jpg)
© 2012 Raible Designs
More Scalate Goodness
82
![Page 83: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/83.jpg)
© 2012 Raible Designs
More Scalate Goodness
83
![Page 84: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/84.jpg)
© 2012 Raible Designs
More Scalate Goodness
84
![Page 85: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/85.jpg)
© 2012 Raible Designs
Scalate as a Play Module
85
http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play
![Page 86: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/86.jpg)
© 2012 Raible Designs
App was still unusable‣ I still hadn’t solved the fundamental problem‣ The app couldn’t run in the background on a
mobile phone
86
![Page 87: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/87.jpg)
© 2012 Raible Designs
PhoneGap to the Rescue!
87
![Page 88: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/88.jpg)
© 2012 Raible Designs
Requirements
88
‣ Intel-based computer with Mac OS X Snow Leopard (10.6)
‣ Xcode‣ PhoneGap‣ Necessary for Installation:
- An Apple iOS Device
- iOS Developer Certification
![Page 89: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/89.jpg)
© 2012 Raible Designs
Icons and Splash Screen
89
![Page 90: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/90.jpg)
© 2012 Raible Designs
Background Modes
90
![Page 91: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/91.jpg)
© 2012 Raible Designs
Success!
91
![Page 92: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/92.jpg)
© 2012 Raible Designs
PhoneGap Writeup
92
http://raibledesigns.com/rd/entry/phonegap_to_the_rescue
![Page 93: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/93.jpg)
© 2012 Raible Designs
Was it worth it?
‣ Development Hours: $$$‣ play-more.com domain: $180‣ GoPro Helmet Cam: $239‣ iOS Certified Developer: $100‣ Free Trip to Devoxx: Priceless
93
![Page 94: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/94.jpg)
© 2012 Raible Designs
Since Devoxx
‣ Tried to upgrade to Play 2.0‣ Integrated RESTful Services‣ Integrated Secure Social for
Authentication‣ Added ability to save, edit
and delete workouts
94
![Page 95: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/95.jpg)
© 2012 Raible Designs
Upgrading to Play 2.0
95
![Page 96: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/96.jpg)
© 2012 Raible Designs
Upgrading to Play 2.0
96
“If it's a critical project, to be finished before next March 2012, I would go with Play 1.x.”
![Page 97: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/97.jpg)
© 2012 Raible Designs
JSON Services
97
![Page 98: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/98.jpg)
© 2012 Raible Designs
API Tests
98
![Page 99: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/99.jpg)
© 2012 Raible Designs
Secure Social
99
![Page 100: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/100.jpg)
© 2012 Raible Designs
Secure Social
100
![Page 101: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/101.jpg)
© 2012 Raible Designs
Secure Social
101
http://raibledesigns.com/rd/entry/secure_json_services_with_play
![Page 102: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/102.jpg)
© 2012 Raible Designs
Was it worth it?
‣ Development Hours: $$$‣ play-more.com domain: $180‣ GoPro Helmet Cam: $239‣ iOS Certified Developer: $100‣ Free Trip to Jfokus: Awesome!
102
![Page 103: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/103.jpg)
© 2012 Raible Designs
Developing Play More
103
http://vimeo.com/36826202
![Page 104: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/104.jpg)
© 2012 Raible Designs
Since Jfokus
‣ Upgraded to Play 2.0‣ Rewrote iOS App
- Integrated with jQTouch
- Optimized for speed
- Upgraded PhoneGap
- Tested with iOS 6 Beta
104
![Page 105: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/105.jpg)
© 2012 Raible Designs
Upgrading to Play 2
105
http://raibledesigns.com/rd/entry/upgrading_to_play_2_anorm
![Page 106: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/106.jpg)
© 2012 Raible Designs
Tools
106
![Page 107: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/107.jpg)
© 2012 Raible Designs
What didn’t work?
107
‣ Wasn’t able to get workouts sorting by date‣ Didn’t have time to implement Draft and Syncing
- Local Storage or Web SQL Database?
‣ Geo doesn’t stop after pressing stop button‣ Scalate integration with errors and flash‣ Secure Social doesn’t work on Heroku‣ Only Track When Moving not implemented
![Page 108: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/108.jpg)
© 2012 Raible Designs
What didn’t work?
108
![Page 109: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/109.jpg)
© 2012 Raible Designs
Lessons Learned
‣ Develop Mobile Client first‣ Develop Web Client as a one-
page app‣ Don’t rely on the internet for
mobile‣ Keep static assets local for
faster startup‣ Bleeding edge can be painful
109
![Page 110: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/110.jpg)
© 2012 Raible Designs
Would I do it again?
‣ Learned more about Play and Scala than expected
‣ Play 1 was more productive than Play 2
‣ Anorm and Scalate were huge time sinks
‣ HTML5 and CoffeeScript were most enjoyable
110
![Page 111: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/111.jpg)
© 2012 Raible Designs
HTML5 vs. Native‣ If you need background services like geolocation
or audio, native is necessary‣ Can still write your apps in HTML5
- Bridge the Gap with PhoneGap or Titanium
‣ If mobile is important, consider fully native with WebViews for common features - a.k.a. Hybrid
111
![Page 112: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/112.jpg)
© 2012 Raible Designs
Questions?
Contact- http://raibledesigns.com
- @mraible
Presentation- http://slideshare.net/mraible
Source- https://github.com/mraible/play-more
112
![Page 113: HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012](https://reader037.fdocuments.in/reader037/viewer/2022103000/5550fba2b4c90572478b4ac6/html5/thumbnails/113.jpg)
© 2012 Raible Designs
Play More!‣ Learn Something New‣ Have Fun‣ Get out there and Play!
113