html5 with play scala, coffeescript and jade - devoxx 2011
DESCRIPTION
HTML5 Development with Play Scala, CoffeeScript and Jade Presentation from Devoxx 2011. Discusses these technologies, as well as my story of using them to develop an HTML5 Fitness Tracking application. http://www.devoxx.com/display/DV11/HTML5+with+Play+Scala%2C+CoffeeScript+and+JadeTRANSCRIPT
Photos by Trish McGinity - http://mcginityphoto.com
HTML5 w/ Play Scala, CoffeeScript and Jade
Matt Raible
[email protected]@mraible
© 2011 Raible Designs
Introductions
‣ How many of you like beer?‣ Have you used HTML5?‣ Have you used Play
Framework?‣ Have you used Scala?‣ Tried CoffeeScript?‣ Scalate or Jade?
2
© 2011 Raible Designs
MattRaible
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
Agenda
12
‣ Introductions‣ Why am I doing this talk?‣ What are these technologies?‣ My Development Experience‣ Demo‣ Q and A‣ Conclusion
© 2011 Raible Designs
Why am I doing this talk?
13
© 2011 Raible Designs
Why am I doing this talk?
14
© 2011 Raible Designs
Why am I doing this talk?
15
© 2011 Raible Designs
Why am I doing this talk?
16
‣ I like a Challenge to...- Learn Scala
- Via Play!
- And Jade is cool too!
- So is CoffeeScript!
© 2011 Raible Designs
Why am I doing this talk?
17
‣ Honestly, it’s because of James Strachan...
© 2011 Raible Designs
Why am I doing this talk?
18
‣ Who likes beer too!
© 2011 Raible Designs
Why am I doing this talk?
19
© 2011 Raible Designs
What are these technologies?
20
© 2011 Raible Designs
HTML5
21http://on.wsj.com/tEGIJL
© 2011 Raible Designs
How do you write HTML5?
<!DOCTYPE html>
22
<article> <aside> <section><header> <footer> <nav><audio> <canvas> <video><datalist> <details>
http://www.w3schools.com/html5/html5_reference.asp
<applet> <center> <font><frame> <frameset>
© 2011 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
23
http://lea.verou.me/css3-secrets
transform: rotateY(180deg);
border-radius: 8px 8px 0 0;
box-shadow: 2px 2px 4px 4px;
© 2011 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
24
© 2011 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
25
© 2011 Raible Designs
Weighted Results
‣ Grails (90)‣ Spring MVC (85)‣ Ruby on Rails (82.5)‣ Vaadin (82.5)‣ Play (82.5)‣ GWT (80)
26
© 2011 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.
27
© 2011 Raible Designs
Play Scala
28
But really, it’s more like this
© 2011 Raible Designs
Play Scala
29
© 2011 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
30
© 2011 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
31
© 2011 Raible Designs
Scala vs. Java
32
© 2011 Raible Designs
Play with Scala
33
© 2011 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
34
© 2011 Raible Designs
CoffeeScript
35
© 2011 Raible Designs
JavaScript: The Good Parts
36
© 2011 Raible Designs
Jade
37
© 2011 Raible Designs
Jade Example
38
© 2011 Raible Designs
CoffeeBar
39
© 2011 Raible Designs
My Development Experience
40
© 2011 Raible Designs
Getting Started
41
© 2011 Raible Designs
Developing with Play Scala
42
© 2011 Raible Designs
Tools I started with...
43
© 2011 Raible Designs
Scalate Module
44
© 2011 Raible Designs
Scalate Integration Solution
45
© 2011 Raible Designs
Integrating Scalate with Play
46
play deps --sync
© 2011 Raible Designs
Integrating Scalate with Play
47
© 2011 Raible Designs
Integrating Scalate with Play
48
© 2011 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)
© 2011 Raible Designs
Integrating Scalate with Play
50
http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with
© 2011 Raible Designs
Play 2.0
51
© 2011 Raible Designs
Play 2.0
52
© 2011 Raible Designs
Play 2.0 Beta
53
© 2011 Raible Designs
A Nice Break ...
54
© 2011 Raible Designs
CoffeeScript with Play
55
© 2011 Raible Designs
CoffeeScript with Play
56
http://raibledesigns.com/rd/entry/trying_to_make_coffeescript_work
© 2011 Raible Designs
My Development Experience
57
© 2011 Raible Designs
© 2011 Raible Designs
H5BP and Play
59
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/.
© 2011 Raible Designs
Scalate Layouts
60
© 2011 Raible Designs
HTML5 Boilerplate
61
http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate
© 2011 Raible Designs
HTML5 Development
62
© 2011 Raible Designs
StopWatch with Coffee
63
© 2011 Raible Designs
Jade Template for Watch
64
© 2011 Raible Designs
HTML5 Development
65
© 2011 Raible Designs
HTML5 Geo API
66
© 2011 Raible Designs
Google Maps JS API
67
© 2011 Raible Designs
Jade View for Map
68
© 2011 Raible Designs
HTML5 Development
69
© 2011 Raible Designs
Odometer
70
© 2011 Raible Designs
Testing
71
‣ 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
© 2011 Raible Designs
Discovered
72
‣ HTML5 Geolocation was highly inaccurate- Fixed by passing {enableHighAccuracy: true} to
navigator.geolocation.watchPosition()
© 2011 Raible Designs
Discovered
73
© 2011 Raible Designs
Show Stopper?
74
‣ Geolocation doesn’t run in the background
© 2011 Raible Designs
Making it look good
75
© 2011 Raible Designs
Twitter’s Bootstrap
76
© 2011 Raible Designs
Bootstrap
77
© 2011 Raible Designs
LESS
78
© 2011 Raible Designs
LESS
79
© 2011 Raible Designs
CSS3 Media Queries
80
© 2011 Raible Designs
HTML5 Features
‣ Geolocation‣ CSS 3‣ Audio‣ History‣ Local Storage‣ Canvas
81
© 2011 Raible Designs
HTML5 and Bootstrap
82
http://raibledesigns.com/rd/entry/developing_with_html5_coffeescript_and
© 2011 Raible Designs
Anorm and PostgreSQL
83
‣ 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
© 2011 Raible Designs
Data Model
84
© 2011 Raible Designs
ScalaTest
85
© 2011 Raible Designs
Anorm in Action
86
© 2011 Raible Designs
Controller and View
87
© 2011 Raible Designs
Anorm, Dates & PostgreSQL
88
© 2011 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
89
© 2011 Raible Designs
Anorm and PostgreSQL
90
http://raibledesigns.com/rd/entry/play_scala_s_anorm_heroku
© 2011 Raible Designs
More Scalate Goodness
91
© 2011 Raible Designs
More Scalate Goodness
92
© 2011 Raible Designs
More Scalate Goodness
93
© 2011 Raible Designs
Scalate as a Play Module
94
http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play
© 2011 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
95
© 2011 Raible Designs
PhoneGap to the Rescue!
96
© 2011 Raible Designs
Requirements
97
‣ Intel-based computer with Mac OS X Snow Leopard (10.6)
‣ Xcode‣ PhoneGap‣ Necessary for Installation:
- An Apple iOS Device
- iOS Developer Certification
© 2011 Raible Designs
Icons and Splash Screen
98
© 2011 Raible Designs
Background Modes
99
© 2011 Raible Designs
Success!
100
© 2011 Raible Designs
PhoneGap Writeup
101
http://raibledesigns.com/rd/entry/phonegap_to_the_rescue
© 2011 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
102
© 2011 Raible Designs
Developing Play More103
http://www.youtube.com/watch?v=bBqtPPfM2xQ
© 2011 Raible Designs
Tools
104
© 2011 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
105
© 2011 Raible Designs
Questions?
Contact- http://raibledesigns.com
- http://twitter.com/mraible
Download- http://slideshare.net/mraible
106
© 2011 Raible Designs
Play More!‣ Learn Something New‣ Have Fun‣ Get out there and Play!
107