HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012

45,998 views

Published on

HTML5 Development with Play Scala, CoffeeScript and Jade Presentation from ÜberConf 2012. Discusses these technologies, as well as my story of using them to develop an HTML5 Fitness Tracking application.

Read more about this presentation at:

http://raibledesigns.com/rd/entry/migrating_to_play_2_and

Published in: Technology, Education
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
45,998
On SlideShare
0
From Embeds
0
Number of Embeds
19,145
Actions
Shares
0
Downloads
358
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012

  1. with Play Scala, CoffeeScript and JadeMatt Raiblehttp://raibledesigns.comPhotos 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 ConnoisseurFounder 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
  6. Why ÜberConf? © 2012 Raible Designs 6
  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
  11. What are these technologies? © 2012 Raible Designs 11
  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
  19. Play ScalaBut really, it’s more like this © 2012 Raible Designs 19
  20. Play Scala © 2012 Raible Designs 20
  21. Scala “Scala is like the dragon in Avatar. It will try to killyou, 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 Good Parts © 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 Play Scala © 2012 Raible Designs 32
  33. Tools I started with... © 2012 Raible Designs 33
  34. Scalate Module © 2012 Raible Designs 34
  35. Scalate Integration Solution © 2012 Raible Designs 35
  36. Integrating Scalate with Play play deps --sync © 2012 Raible Designs 36
  37. Integrating Scalate with Play © 2012 Raible Designs 37
  38. Integrating Scalate with Play © 2012 Raible Designs 38
  39. http://blog.heroku.com/archives/2011/8/29/play/Cannot start in PROD mode with errorsTemplate 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
  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 Raible Designs
  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 for Watch © 2012 Raible Designs 55
  56. HTML5 Development © 2012 Raible Designs 56
  57. HTML5 Geo API © 2012 Raible Designs 57
  58. Google Maps JS API © 2012 Raible Designs 58
  59. Jade View for Map © 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 look good © 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 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
  87. PhoneGap to the Rescue! © 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 Splash Screen © 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 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
  95. Upgrading to Play 2.0 © 2012 Raible Designs 95
  96. Upgrading to Play 2.0 “If its 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 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
  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 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
  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 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
  112. Questions?Contact - http://raibledesigns.com - @mraiblePresentation - http://slideshare.net/mraibleSource - 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

×