More Related Content Similar to HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012 (6) More from Matt Raible (20) HTML5 with Play Scala, CoffeeScript and Jade - UberConf 20121. with Play Scala, CoffeeScript and Jade
Matt Raible
http://raibledesigns.com
Photos by Trish - http://mcginityphoto.com
2. Introductions
‣ Have you used HTML5?
‣ Have you used Play
Framework?
‣ Have you tried Scala?
‣ Tried CoffeeScript?
‣ Scalate or Jade?
© 2012 Raible Designs 2
3. Who is Matt Raible?
Father, Skier, Cyclist
Web Framework Connoisseur
Founder of AppFuse
Blogger on raibledesigns.com
© 2012 Raible Designs
4. Agenda
‣ Introductions
‣ Why am I doing this talk?
‣ What are these technologies?
‣ My Development Experience
‣ Demo
‣ Q and A
‣ Conclusion
© 2012 Raible Designs 4
5. Why am I doing this talk?
© 2012 Raible Designs 5
7. Why am I doing this talk?
© 2012 Raible Designs 7
8. Why am I doing this talk?
‣ I like a Challenge to...
- Learn Scala
- Via Play!
- And Jade is cool too!
- So is CoffeeScript!
© 2012 Raible Designs 8
9. Why am I doing this talk?
‣ Honestly, it’s because of James Strachan...
© 2012 Raible Designs 9
10. Why am I doing this talk?
© 2012 Raible Designs 10
12. HTML5
http://on.wsj.com/tEGIJL
© 2012 Raible Designs 12
13. How do you write HTML5?
<!DOCTYPE html>
<article> <aside> <section>
<header> <footer> <nav>
<audio> <canvas> <video>
<datalist> <details>
<applet> <center> <font>
<frame> <frameset>
http://www.w3schools.com/html5/html5_reference.asp
© 2012 Raible Designs 13
14. CSS3
‣ Animated Transitions
transform: rotateY(180deg);
‣ Rounded Corners
border-radius: 8px 8px 0 0;
‣ Drop Shadows
box-shadow: 2px 2px 4px 4px;
‣ Gradient Colors
‣ Styling based on sibling count
‣ More cursors for better usability
‣ Custom Checkboxes and Radio Buttons
http://lea.verou.me/css3-secrets
© 2012 Raible Designs 14
15. 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
© 2012 Raible Designs 15
16. Matrix Results
18
17.5 17 17 17
15.5 15 15
13.5 14.5 14 14
13.513.5
11.5
9
4.5
0
ails
g
ils
T
din
t
ry
2
s
y
x
F
Lift
e
Pla
ipe
Fle
JS
rin
GW
est
ck
uts
Ra
a
Gr
Sp
Str
Va
Wi
Tap
Str
© 2012 Raible Designs 16
17. Weighted Results
‣ Grails (90)
‣ Spring MVC (85)
‣ Ruby on Rails (82.5)
‣ Vaadin (82.5)
‣ Play (82.5)
‣ GWT (80)
© 2012 Raible Designs 17
18. Mailing List Traffic
Wicket 1841
GWT 1753
Grails 1635
Rails 1604
Tapestry 1538
Play 1451
0 475 950 1425 1900
July 2011
* Spring MVC and Vaadin use Forums, which don’t provide this data.
© 2012 Raible Designs 18
21. 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
© 2012 Raible Designs 21
22. Scala Basics
‣ def starts a method
‣ variables are started with var or val
‣ variables are defined with name:type
‣ semicolons are not required
© 2012 Raible Designs 22
25. 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
© 2012 Raible Designs 25
28. Jade
© 2012 Raible Designs 28
39. http://blog.heroku.com/archives/2011/8/29/play/
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)
© 2012 Raible Designs
40. Integrating Scalate with Play
http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with
© 2012 Raible Designs 40
44. Play 2.0 Beta
http://raibledesigns.com/rd/entry/play_2_0_a_web
© 2012 Raible Designs 44
47. CoffeeScript with Play
http://raibledesigns.com/rd/entry/trying_to_make_coffeescript_work
© 2012 Raible Designs 47
50. H5BP and Play
cd $boilerplate-download
cp 404.html ~/dev/play-more/app/views/errors/404.html
cp *.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/.
© 2012 Raible Designs 50
52. HTML5 Boilerplate
http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate
© 2012 Raible Designs 52
62. Testing
‣ 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
© 2012 Raible Designs 62
63. Discovered
‣ HTML5 Geolocation was highly inaccurate
- Fixed by passing {enableHighAccuracy: true} to
navigator.geolocation.watchPosition()
© 2012 Raible Designs 63
65. Show Stopper?
‣ Geolocation doesn’t run in the background
© 2012 Raible Designs 65
69. LESS
© 2012 Raible Designs 69
70. LESS
© 2012 Raible Designs 70
72. HTML5 Features
‣ Geolocation
‣ CSS 3
‣ Audio
‣ History
‣ Local Storage
‣ Canvas
© 2012 Raible Designs 72
73. HTML5 and Bootstrap
http://raibledesigns.com/rd/entry/developing_with_html5_coffeescript_and
© 2012 Raible Designs 73
74. Anorm and PostgreSQL
‣ 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
© 2012 Raible Designs 74
80. Anorm, Dates & PostgreSQL
‣ 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
© 2012 Raible Designs 80
81. Anorm and PostgreSQL
http://raibledesigns.com/rd/entry/play_scala_s_anorm_heroku
© 2012 Raible Designs 81
85. Scalate as a Play Module
http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play
© 2012 Raible Designs 85
86. App was still unusable
‣ I still hadn’t solved the fundamental problem
‣ The app couldn’t run in the background on a
mobile phone
© 2012 Raible Designs 86
88. Requirements
‣ Intel-based computer with Mac OS X Snow
Leopard (10.6)
‣ Xcode
‣ PhoneGap
‣ Necessary for Installation:
- An Apple iOS Device
- iOS Developer Certification
© 2012 Raible Designs 88
92. PhoneGap Writeup
http://raibledesigns.com/rd/entry/phonegap_to_the_rescue
© 2012 Raible Designs 92
93. Was it worth it?
‣ Development Hours: $$$
‣ play-more.com domain: $180
‣ GoPro Helmet Cam: $239
‣ iOS Certified Developer: $100
‣ Free Trip to Devoxx: Priceless
© 2012 Raible Designs 93
94. 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
© 2012 Raible Designs 94
96. Upgrading to Play 2.0
“If it's a critical project, to be finished before
next March 2012, I would go with Play 1.x.”
© 2012 Raible Designs 96
101. Secure Social
http://raibledesigns.com/rd/entry/secure_json_services_with_play
© 2012 Raible Designs 101
102. Was it worth it?
‣ Development Hours: $$$
‣ play-more.com domain: $180
‣ GoPro Helmet Cam: $239
‣ iOS Certified Developer: $100
‣ Free Trip to Jfokus: Awesome!
© 2012 Raible Designs 102
104. Since Jfokus
‣ Upgraded to Play 2.0
‣ Rewrote iOS App
- Integrated with jQTouch
- Optimized for speed
- Upgraded PhoneGap
- Tested with iOS 6 Beta
© 2012 Raible Designs 104
105. Upgrading to Play 2
http://raibledesigns.com/rd/entry/upgrading_to_play_2_anorm
© 2012 Raible Designs 105
106. Tools
© 2012 Raible Designs 106
107. What didn’t work?
‣ 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
© 2012 Raible Designs 107
109. 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
© 2012 Raible Designs 109
110. 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
© 2012 Raible Designs 110
111. 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
© 2012 Raible Designs 111
113. Play More!
‣ Learn Something New
‣ Have Fun
‣ Get out there and Play!
© 2012 Raible Designs 113