Download as PDF, PPTX
Uploaded byMatt Raible
HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012
Matt Raible presents a talk on using Play Framework with Scala, CoffeeScript, and Jade, exploring these technologies' benefits and practical applications. He shares his development experiences, challenges faced, and lessons learned while integrating various tools and frameworks, highlighting HTML5 features and mobile development concerns. The presentation emphasizes the importance of adapting to new technologies and experimenting in development to enhance productivity and innovation.
HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012
- 1. 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 MattRaible? 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 Idoing this talk? © 2012 Raible Designs 5
- 6. Why ÜberConf? © 2012 Raible Designs 6
- 7. Why am Idoing this talk? © 2012 Raible Designs 7
- 8. Why am Idoing 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 Idoing this talk? ‣ Honestly, it’s because of James Strachan... © 2012 Raible Designs 9
- 10. Why am Idoing this talk? © 2012 Raible Designs 10
- 11. What are thesetechnologies? © 2012 Raible Designs 11
- 12. HTML5 http://on.wsj.com/tEGIJL © 2012 Raible Designs 12
- 13. How do youwrite 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
- 19. Play Scala But really,it’s more like this © 2012 Raible Designs 19
- 20. Play Scala © 2012 Raible Designs 20
- 21. Scala “Scala islike 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
- 23. Scala vs. Java © 2012 Raible Designs 23
- 24. Play with Scala © 2012 Raible Designs 24
- 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
- 26. CoffeeScript © 2012 Raible Designs 26
- 27. JavaScript: The GoodParts © 2012 Raible Designs 27
- 28. Jade © 2012 Raible Designs 28
- 29. Jade Example © 2012 Raible Designs 29
- 30. My Development Experience © 2012 Raible Designs 30
- 31. Getting Started © 2012 Raible Designs 31
- 32. Developing with PlayScala © 2012 Raible Designs 32
- 33. Tools I startedwith... © 2012 Raible Designs 33
- 34. Scalate Module © 2012 Raible Designs 34
- 35. Scalate Integration Solution © 2012 Raible Designs 35
- 36. Integrating Scalate withPlay play deps --sync © 2012 Raible Designs 36
- 37. Integrating Scalate withPlay © 2012 Raible Designs 37
- 38. Integrating Scalate withPlay © 2012 Raible Designs 38
- 39. http://blog.heroku.com/archives/2011/8/29/play/ Cannot start inPROD 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 withPlay http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with © 2012 Raible Designs 40
- 41. Play 2.0 © 2012 Raible Designs 41
- 42. Play 2.0 © 2012 Raible Designs 42
- 43. Play 2.0 © 2012 Raible Designs 43
- 44. Play 2.0 Beta http://raibledesigns.com/rd/entry/play_2_0_a_web © 2012 Raible Designs 44
- 45. A Nice Break... © 2012 Raible Designs 45
- 46. CoffeeScript with Play © 2012 Raible Designs 46
- 47. CoffeeScript with Play http://raibledesigns.com/rd/entry/trying_to_make_coffeescript_work © 2012 Raible Designs 47
- 48. My Development Experience © 2012 Raible Designs 48
- 49. © 2012 RaibleDesigns
- 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
- 51. Scalate Layouts © 2012 Raible Designs 51
- 52. HTML5 Boilerplate http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate © 2012 Raible Designs 52
- 53. HTML5 Development © 2012 Raible Designs 53
- 54. StopWatch with Coffee © 2012 Raible Designs 54
- 55. Jade Template forWatch © 2012 Raible Designs 55
- 56. HTML5 Development © 2012 Raible Designs 56
- 57. HTML5 Geo API © 2012 Raible Designs 57
- 58. Google Maps JSAPI © 2012 Raible Designs 58
- 59. Jade View forMap © 2012 Raible Designs 59
- 60. HTML5 Development © 2012 Raible Designs 60
- 61. Odometer © 2012 Raible Designs 61
- 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
- 64. Discovered © 2012 Raible Designs 64
- 65. Show Stopper? ‣ Geolocation doesn’t run in the background © 2012 Raible Designs 65
- 66. Making it lookgood © 2012 Raible Designs 66
- 67. Twitter’s Bootstrap © 2012 Raible Designs 67
- 68. Bootstrap © 2012 Raible Designs 68
- 69. LESS © 2012 Raible Designs 69
- 70. LESS © 2012 Raible Designs 70
- 71. CSS3 Media Queries © 2012 Raible Designs 71
- 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
- 75. Data Model © 2012 Raible Designs 75
- 76. ScalaTest © 2012 Raible Designs 76
- 77. Anorm in Action © 2012 Raible Designs 77
- 78. Controller and View © 2012 Raible Designs 78
- 79. Anorm, Dates &PostgreSQL © 2012 Raible Designs 79
- 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
- 82. More Scalate Goodness © 2012 Raible Designs 82
- 83. More Scalate Goodness © 2012 Raible Designs 83
- 84. More Scalate Goodness © 2012 Raible Designs 84
- 85. Scalate as aPlay Module http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play © 2012 Raible Designs 85
- 86. App was stillunusable ‣ I still hadn’t solved the fundamental problem ‣ The app couldn’t run in the background on a mobile phone © 2012 Raible Designs 86
- 87. PhoneGap to theRescue! © 2012 Raible Designs 87
- 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
- 89. Icons and SplashScreen © 2012 Raible Designs 89
- 90. Background Modes © 2012 Raible Designs 90
- 91. Success! © 2012 Raible Designs 91
- 92. PhoneGap Writeup http://raibledesigns.com/rd/entry/phonegap_to_the_rescue © 2012 Raible Designs 92
- 93. Was it worthit? ‣ 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
- 95. Upgrading to Play2.0 © 2012 Raible Designs 95
- 96. Upgrading to Play2.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
- 97. JSON Services © 2012 Raible Designs 97
- 98. API Tests © 2012 Raible Designs 98
- 99. Secure Social © 2012 Raible Designs 99
- 100. Secure Social © 2012 Raible Designs 100
- 101. Secure Social http://raibledesigns.com/rd/entry/secure_json_services_with_play © 2012 Raible Designs 101
- 102. Was it worthit? ‣ Development Hours: $$$ ‣ play-more.com domain: $180 ‣ GoPro Helmet Cam: $239 ‣ iOS Certified Developer: $100 ‣ Free Trip to Jfokus: Awesome! © 2012 Raible Designs 102
- 103. Developing Play More http://vimeo.com/36826202 © 2012 Raible Designs 103
- 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 Play2 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
- 108. What didn’t work? © 2012 Raible Designs 108
- 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 doit 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
- 112. Questions? Contact - http://raibledesigns.com - @mraible Presentation - http://slideshare.net/mraible Source - https://github.com/mraible/play-more © 2012 Raible Designs 112
- 113. Play More! ‣ Learn Something New ‣ Have Fun ‣ Get out there and Play! © 2012 Raible Designs 113