HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012

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

Check these out next

HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012

Recommended

More Related Content

Similar to HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012(7)

More from Matt Raible(20)

Recently uploaded(20)

HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012