Download as PDF, PPTX
Uploaded byMatt Raible
HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011
The document presents a talk by Matt Raible discussing the use of HTML5, Play Framework, Scala, CoffeeScript, and Jade in web development, highlighting his personal experiences with these technologies. It covers the features of each technology, presents coding samples, and addresses challenges faced during development. The talk emphasizes the integration of these tools to enhance web applications while promoting open communication and further learning in the field.
HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011
- 1. HTML5 w/ PlayScala, CoffeeScript and Jade Matt Raible matt@raibledesigns.com @mraible Photos by Trish McGinity - http://mcginityphoto.com
- 2. 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? © 2011 Raible Designs 2
- 3. Matt Raible ©2011 Raible Designs
- 4. © 2011 RaibleDesigns
- 5. © 2011 RaibleDesigns
- 6. © 2011 RaibleDesigns
- 7. © 2011 RaibleDesigns
- 8. © 2011 RaibleDesigns
- 9. © 2011 RaibleDesigns
- 10. © 2011 RaibleDesigns
- 11. © 2011 RaibleDesigns
- 12. Agenda ‣ Introductions ‣ Why am I doing this talk? ‣ What are these technologies? ‣ My Development Experience ‣ Demo ‣ Q and A ‣ Conclusion © 2011 Raible Designs 12
- 13. Why am Idoing this talk? © 2011 Raible Designs 13
- 14. Why am Idoing this talk? © 2011 Raible Designs 14
- 15. Why am Idoing this talk? © 2011 Raible Designs 15
- 16. Why am Idoing this talk? ‣ I like a Challenge to... - Learn Scala - Via Play! - And Jade is cool too! - So is CoffeeScript! © 2011 Raible Designs 16
- 17. Why am Idoing this talk? ‣ Honestly, it’s because of James Strachan... © 2011 Raible Designs 17
- 18. Why am Idoing this talk? ‣ Who likes beer too! © 2011 Raible Designs 18
- 19. Why am Idoing this talk? © 2011 Raible Designs 19
- 20. What are thesetechnologies? © 2011 Raible Designs 20
- 21. HTML5 http://on.wsj.com/tEGIJL © 2011 Raible Designs 21
- 22. 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 © 2011 Raible Designs 22
- 23. 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 © 2011 Raible Designs 23
- 24. 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 © 2011 Raible Designs 24
- 25. 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 © 2011 Raible Designs 25
- 26. Weighted Results ‣ Grails (90) ‣ Spring MVC (85) ‣ Ruby on Rails (82.5) ‣ Vaadin (82.5) ‣ Play (82.5) ‣ GWT (80) © 2011 Raible Designs 26
- 27. 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. © 2011 Raible Designs 27
- 28. Play Scala But really,it’s more like this © 2011 Raible Designs 28
- 29. Play Scala © 2011 Raible Designs 29
- 30. 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 © 2011 Raible Designs 30
- 31. Scala Basics ‣ def starts a method ‣ variables are started with var or val ‣ variables are defined with name:type ‣ semicolons are not required © 2011 Raible Designs 31
- 32. Scala vs. Java © 2011 Raible Designs 32
- 33. Play with Scala © 2011 Raible Designs 33
- 34. 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 © 2011 Raible Designs 34
- 35. CoffeeScript © 2011 Raible Designs 35
- 36. JavaScript: The GoodParts © 2011 Raible Designs 36
- 37. Jade © 2011 Raible Designs 37
- 38. Jade Example © 2011 Raible Designs 38
- 39. CoffeeBar © 2011 Raible Designs 39
- 40. My Development Experience © 2011 Raible Designs 40
- 41. Getting Started © 2011 Raible Designs 41
- 42. Developing with PlayScala © 2011 Raible Designs 42
- 43. Tools I startedwith... © 2011 Raible Designs 43
- 44. Scalate Module © 2011 Raible Designs 44
- 45. Scalate Integration Solution © 2011 Raible Designs 45
- 46. Integrating Scalate withPlay play deps --sync © 2011 Raible Designs 46
- 47. Integrating Scalate withPlay © 2011 Raible Designs 47
- 48. Integrating Scalate withPlay © 2011 Raible Designs 48
- 49. 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) © 2011 Raible Designs
- 50. Integrating Scalate withPlay http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with © 2011 Raible Designs 50
- 51. Play 2.0 © 2011 Raible Designs 51
- 52. Play 2.0 © 2011 Raible Designs 52
- 53. Play 2.0 Beta © 2011 Raible Designs 53
- 54. A Nice Break... © 2011 Raible Designs 54
- 55. CoffeeScript with Play © 2011 Raible Designs 55
- 56. CoffeeScript with Play http://raibledesigns.com/rd/entry/trying_to_make_coffeescript_work © 2011 Raible Designs 56
- 57. My Development Experience © 2011 Raible Designs 57
- 58. © 2011 RaibleDesigns
- 59. 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/. © 2011 Raible Designs 59
- 60. Scalate Layouts © 2011 Raible Designs 60
- 61. HTML5 Boilerplate http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate © 2011 Raible Designs 61
- 62. HTML5 Development © 2011 Raible Designs 62
- 63. StopWatch with Coffee © 2011 Raible Designs 63
- 64. Jade Template forWatch © 2011 Raible Designs 64
- 65. HTML5 Development © 2011 Raible Designs 65
- 66. HTML5 Geo API © 2011 Raible Designs 66
- 67. Google Maps JSAPI © 2011 Raible Designs 67
- 68. Jade View forMap © 2011 Raible Designs 68
- 69. HTML5 Development © 2011 Raible Designs 69
- 70. Odometer © 2011 Raible Designs 70
- 71. 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 © 2011 Raible Designs 71
- 72. Discovered ‣ HTML5 Geolocation was highly inaccurate - Fixed by passing {enableHighAccuracy: true} to navigator.geolocation.watchPosition() © 2011 Raible Designs 72
- 73. Discovered © 2011 Raible Designs 73
- 74. Show Stopper? ‣ Geolocation doesn’t run in the background © 2011 Raible Designs 74
- 75. Making it lookgood © 2011 Raible Designs 75
- 76. Twitter’s Bootstrap © 2011 Raible Designs 76
- 77. Bootstrap © 2011 Raible Designs 77
- 78. LESS © 2011 Raible Designs 78
- 79. LESS © 2011 Raible Designs 79
- 80. CSS3 Media Queries © 2011 Raible Designs 80
- 81. HTML5 Features ‣ Geolocation ‣ CSS 3 ‣ Audio ‣ History ‣ Local Storage ‣ Canvas © 2011 Raible Designs 81
- 82. HTML5 and Bootstrap http://raibledesigns.com/rd/entry/developing_with_html5_coffeescript_and © 2011 Raible Designs 82
- 83. 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 © 2011 Raible Designs 83
- 84. Data Model © 2011 Raible Designs 84
- 85. ScalaTest © 2011 Raible Designs 85
- 86. Anorm in Action © 2011 Raible Designs 86
- 87. Controller and View © 2011 Raible Designs 87
- 88. Anorm, Dates &PostgreSQL © 2011 Raible Designs 88
- 89. 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 © 2011 Raible Designs 89
- 90. Anorm and PostgreSQL http://raibledesigns.com/rd/entry/play_scala_s_anorm_heroku © 2011 Raible Designs 90
- 91. More Scalate Goodness © 2011 Raible Designs 91
- 92. More Scalate Goodness © 2011 Raible Designs 92
- 93. More Scalate Goodness © 2011 Raible Designs 93
- 94. Scalate as aPlay Module http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play © 2011 Raible Designs 94
- 95. App was stillunusable ‣ I still hadn’t solved the fundamental problem ‣ The app couldn’t run in the background on a mobile phone © 2011 Raible Designs 95
- 96. PhoneGap to theRescue! © 2011 Raible Designs 96
- 97. Requirements ‣ 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 97
- 98. Icons and SplashScreen © 2011 Raible Designs 98
- 99. Background Modes © 2011 Raible Designs 99
- 100. Success! © 2011 Raible Designs 100
- 101. PhoneGap Writeup http://raibledesigns.com/rd/entry/phonegap_to_the_rescue © 2011 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 Devoxx: Priceless © 2011 Raible Designs 102
- 103. Developing Play More http://www.youtube.com/watch?v=bBqtPPfM2xQ © 2011 Raible Designs 103
- 104. Tools © 2011 Raible Designs 104
- 105. 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 © 2011 Raible Designs 105
- 106. Questions? Contact - http://raibledesigns.com - http://twitter.com/mraible Download - http://slideshare.net/mraible © 2011 Raible Designs 106
- 107. Play More! ‣ Learn Something New ‣ Have Fun ‣ Get out there and Play! © 2011 Raible Designs 107