Photos by Trish - http://mcginityphoto.com
with Play Scala, CoffeeScript and Jade
Matt Raiblehttp://raibledesigns.com
© 2012 Raible Designs
Introductions
‣ Have you used HTML5?‣ Have you used Play
Framework?‣ Have you tried Scala?‣ Tried CoffeeScript?‣ Scalate or Jade?
2
© 2012 Raible Designs
Blogger on raibledesigns.com
Founder of AppFuse
Father, Skier, Cyclist
Web Framework Connoisseur
Who is Matt Raible?
© 2012 Raible Designs
Agenda
4
‣ Introductions‣ Why am I doing this talk?‣ What are these technologies?‣ My Development Experience‣ Demo‣ Q and A‣ Conclusion
© 2012 Raible Designs
Why am I doing this talk?
5
© 2012 Raible Designs
Why am I doing this talk?
6
http://www.flickr.com/photos/question_everything/2931013045/
© 2012 Raible Designs
Why am I doing this talk?
7
© 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!
© 2012 Raible Designs
Why am I doing this talk?
9
‣ Honestly, it’s because of James Strachan...
© 2012 Raible Designs
Why am I doing this talk?
10
‣ Who likes beer too!
© 2012 Raible Designs
Why am I doing this talk?
11
© 2012 Raible Designs
What are these technologies?
12
© 2012 Raible Designs
HTML5
13http://on.wsj.com/tEGIJL
© 2012 Raible Designs
How do you write HTML5?
<!DOCTYPE html>
14
<article> <aside> <section><header> <footer> <nav><audio> <canvas> <video><datalist> <details>
http://www.w3schools.com/html5/html5_reference.asp
<applet> <center> <font><frame> <frameset>
© 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
15
http://lea.verou.me/css3-secrets
transform: rotateY(180deg);
border-radius: 8px 8px 0 0;
box-shadow: 2px 2px 4px 4px;
© 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
16
© 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
17
© 2012 Raible Designs
Weighted Results
‣ Grails (90)‣ Spring MVC (85)‣ Ruby on Rails (82.5)‣ Vaadin (82.5)‣ Play (82.5)‣ GWT (80)
18
© 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.
19
© 2012 Raible Designs
Play Scala
20
But really, it’s more like this
© 2012 Raible Designs
Play Scala
21
© 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
22
© 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
23
© 2012 Raible Designs
Scala vs. Java
24
© 2012 Raible Designs
Play with Scala
25
© 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
26
© 2012 Raible Designs
CoffeeScript
27
© 2012 Raible Designs
JavaScript: The Good Parts
28
© 2012 Raible Designs
Jade
29
© 2012 Raible Designs
Jade Example
30
© 2012 Raible Designs
CoffeeBar
31
© 2012 Raible Designs
My Development Experience
32
© 2012 Raible Designs
Getting Started
33
© 2012 Raible Designs
Developing with Play Scala
34
© 2012 Raible Designs
Tools I started with...
35
© 2012 Raible Designs
Scalate Module
36
© 2012 Raible Designs
Scalate Integration Solution
37
© 2012 Raible Designs
Integrating Scalate with Play
38
play deps --sync
© 2012 Raible Designs
Integrating Scalate with Play
39
© 2012 Raible Designs
Integrating Scalate with Play
40
© 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)
© 2012 Raible Designs
Integrating Scalate with Play
42
http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with
© 2012 Raible Designs
Play 2.0
43
© 2012 Raible Designs
Play 2.0
44
© 2012 Raible Designs
Play 2.0
45
© 2012 Raible Designs
Play 2.0 Beta
46
http://raibledesigns.com/rd/entry/play_2_0_a_web
© 2012 Raible Designs
A Nice Break ...
47
© 2012 Raible Designs
CoffeeScript with Play
48
© 2012 Raible Designs
CoffeeScript with Play
49
http://raibledesigns.com/rd/entry/trying_to_make_coffeescript_work
© 2012 Raible Designs
My Development Experience
50
© 2012 Raible Designs
© 2012 Raible Designs
H5BP and Play
52
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/.
© 2012 Raible Designs
Scalate Layouts
53
© 2012 Raible Designs
HTML5 Boilerplate
54
http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate
© 2012 Raible Designs
HTML5 Development
55
© 2012 Raible Designs
StopWatch with Coffee
56
© 2012 Raible Designs
Jade Template for Watch
57
© 2012 Raible Designs
HTML5 Development
58
© 2012 Raible Designs
HTML5 Geo API
59
© 2012 Raible Designs
Google Maps JS API
60
© 2012 Raible Designs
Jade View for Map
61
© 2012 Raible Designs
HTML5 Development
62
© 2012 Raible Designs
Odometer
63
© 2012 Raible Designs
Testing
64
‣ 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
Discovered
65
‣ HTML5 Geolocation was highly inaccurate- Fixed by passing {enableHighAccuracy: true} to
navigator.geolocation.watchPosition()
© 2012 Raible Designs
Discovered
66
© 2012 Raible Designs
Show Stopper?
67
‣ Geolocation doesn’t run in the background
© 2012 Raible Designs
Making it look good
68
© 2012 Raible Designs
Twitter’s Bootstrap
69
© 2012 Raible Designs
Bootstrap
70
© 2012 Raible Designs
LESS
71
© 2012 Raible Designs
LESS
72
© 2012 Raible Designs
CSS3 Media Queries
73
© 2012 Raible Designs
HTML5 Features
‣ Geolocation‣ CSS 3‣ Audio‣ History‣ Local Storage‣ Canvas
74
© 2012 Raible Designs
HTML5 and Bootstrap
75
http://raibledesigns.com/rd/entry/developing_with_html5_coffeescript_and
© 2012 Raible Designs
Anorm and PostgreSQL
76
‣ 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
Data Model
77
© 2012 Raible Designs
ScalaTest
78
© 2012 Raible Designs
Anorm in Action
79
© 2012 Raible Designs
Controller and View
80
© 2012 Raible Designs
Anorm, Dates & PostgreSQL
81
© 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
82
© 2012 Raible Designs
Anorm and PostgreSQL
83
http://raibledesigns.com/rd/entry/play_scala_s_anorm_heroku
© 2012 Raible Designs
More Scalate Goodness
84
© 2012 Raible Designs
More Scalate Goodness
85
© 2012 Raible Designs
More Scalate Goodness
86
© 2012 Raible Designs
Scalate as a Play Module
87
http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play
© 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
88
© 2012 Raible Designs
PhoneGap to the Rescue!
89
© 2012 Raible Designs
Requirements
90
‣ 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
Icons and Splash Screen
91
© 2012 Raible Designs
Background Modes
92
© 2012 Raible Designs
Success!
93
© 2012 Raible Designs
PhoneGap Writeup
94
http://raibledesigns.com/rd/entry/phonegap_to_the_rescue
© 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
95
© 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!
96
© 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
97
© 2012 Raible Designs
Upgrading to Play 2.0
98
© 2012 Raible Designs
Upgrading to Play 2.0
99
“If it's a critical project, to be finished before next March 2012, I would go with Play 1.x.”
© 2012 Raible Designs
JSON Services
100
© 2012 Raible Designs
API Tests
101
© 2012 Raible Designs
Secure Social
102
© 2012 Raible Designs
Secure Social
103
© 2012 Raible Designs
Secure Social
104
http://raibledesigns.com/rd/entry/secure_json_services_with_play
© 2012 Raible Designs
Developing Play More
105
http://vimeo.com/36826202
© 2012 Raible Designs
Tools
106
© 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
107
© 2012 Raible Designs
Or, What Rich Said...
108
© 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
109
© 2012 Raible Designs
Questions?
Contact- http://raibledesigns.com
- @mraible
Download- http://slideshare.net/mraible
110
© 2012 Raible Designs
Play More!‣ Learn Something New‣ Have Fun‣ Get out there and Play!
111
Top Related