HTML5 w/ Play Scala, CoffeeScript and JadeMatt Raiblematt@raibledesigns.com@mraiblePhotos by Trish McGinity - http://mcgin...
Introductions‣   How many of you like beer?‣   Have you used HTML5?‣   Have you used Play    Framework?‣   Have you used S...
MattRaible  © 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
© 2011 Raible Designs
Agenda‣   Introductions‣   Why am I doing this talk?‣   What are these technologies?‣   My Development Experience‣   Demo‣...
Why am I doing this talk?            © 2011 Raible Designs   13
Why am I doing this talk?            © 2011 Raible Designs   14
Why am I doing this talk?            © 2011 Raible Designs   15
Why am I doing this talk?‣   I like a Challenge to...    - Learn Scala    - Via Play!    - And Jade is cool too!    - So i...
Why am I doing this talk?‣   Honestly, it’s because of James Strachan...                        © 2011 Raible Designs     17
Why am I doing this talk?‣   Who likes beer too!                          © 2011 Raible Designs   18
Why am I doing this talk?            © 2011 Raible Designs   19
What are these technologies?             © 2011 Raible Designs   20
HTML5        http://on.wsj.com/tEGIJL            © 2011 Raible Designs   21
How do you write HTML5?<!DOCTYPE html><article> <aside> <section><header> <footer> <nav><audio> <canvas> <video><datalist>...
CSS3‣   Animated Transitions                   transform: rotateY(180deg);‣   Rounded Corners                 border-radiu...
Play Framework‣   A full-stack Java Web Framework made by Web    Developers‣   Compile on-the-fly‣   Stateless Architecture...
Matrix Results   18         17.5 17 17 17                                   15.5 15 15  13.5                              ...
Weighted Results‣   Grails (90)‣   Spring MVC (85)‣   Ruby on Rails (82.5)‣   Vaadin (82.5)‣   Play (82.5)‣   GWT (80)    ...
Mailing List Traffic  Wicket                                                                              1841    GWT      ...
Play ScalaBut really, it’s more like this                            © 2011 Raible Designs   28
Play Scala             © 2011 Raible Designs   29
Scala “Scala is like the dragon in Avatar. It will try to killyou, but if you master it, you can fly great distances       ...
Scala Basics‣   def starts a method‣   variables are started with var or val‣   variables are defined with name:type‣   sem...
Scala vs. Java            © 2011 Raible Designs   32
Play with Scala            © 2011 Raible Designs   33
Learning Scala‣   Venkat’s Scala for the Intrigued    - PragPub Magazine, starting in Sep 2011‣   Scala for the Impatient ...
CoffeeScript               © 2011 Raible Designs   35
JavaScript: The Good Parts            © 2011 Raible Designs   36
Jade       © 2011 Raible Designs   37
Jade Example           © 2011 Raible Designs   38
CoffeeBar            © 2011 Raible Designs   39
My Development Experience           © 2011 Raible Designs   40
Getting Started            © 2011 Raible Designs   41
Developing with Play Scala            © 2011 Raible Designs   42
Tools I started with...              © 2011 Raible Designs   43
Scalate Module           © 2011 Raible Designs   44
Scalate Integration Solution             © 2011 Raible Designs   45
Integrating Scalate with Play         play deps --sync              © 2011 Raible Designs   46
Integrating Scalate with Play             © 2011 Raible Designs   47
Integrating Scalate with Play             © 2011 Raible Designs   48
Cannot start in PROD mode with errorsTemplate compilation error (In /app/views/Application/index.jade around line 2)The te...
Integrating Scalate with Play   http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with                       ...
Play 2.0           © 2011 Raible Designs   51
Play 2.0           © 2011 Raible Designs   52
Play 2.0 Beta            © 2011 Raible Designs   53
A Nice Break ...             © 2011 Raible Designs   54
CoffeeScript with Play            © 2011 Raible Designs   55
CoffeeScript with Play   http://raibledesigns.com/rd/entry/trying_to_make_coffeescript_work                             © ...
My Development Experience           © 2011 Raible Designs   57
© 2011 Raible Designs
H5BP and Play cd   $boilerplate-download cp   404.html ~/dev/play-more/app/views/errors/404.html cp   *.png ~/dev/play-mor...
Scalate Layouts            © 2011 Raible Designs   60
HTML5 Boilerplate  http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate                           ...
HTML5 Development          © 2011 Raible Designs   62
StopWatch with Coffee           © 2011 Raible Designs   63
Jade Template for Watch            © 2011 Raible Designs   64
HTML5 Development          © 2011 Raible Designs   65
HTML5 Geo API          © 2011 Raible Designs   66
Google Maps JS API           © 2011 Raible Designs   67
Jade View for Map           © 2011 Raible Designs   68
HTML5 Development          © 2011 Raible Designs   69
Odometer           © 2011 Raible Designs   70
Testing‣   Tried Trip Meter on a bike ride‣   Said I’d traveled 5 km, when I knew I’d gone 10    - Was calculating start t...
Discovered‣   HTML5 Geolocation was highly inaccurate    - Fixed by passing {enableHighAccuracy: true} to      navigator.g...
Discovered             © 2011 Raible Designs   73
Show Stopper?‣   Geolocation doesn’t run in the background                       © 2011 Raible Designs    74
Making it look good            © 2011 Raible Designs   75
Twitter’s Bootstrap             © 2011 Raible Designs   76
Bootstrap            © 2011 Raible Designs   77
LESS       © 2011 Raible Designs   78
LESS       © 2011 Raible Designs   79
CSS3 Media Queries           © 2011 Raible Designs   80
HTML5 Features‣   Geolocation‣   CSS 3‣   Audio‣   History‣   Local Storage‣   Canvas                    © 2011 Raible Des...
HTML5 and Bootstrap  http://raibledesigns.com/rd/entry/developing_with_html5_coffeescript_and                             ...
Anorm and PostgreSQL‣   I’m a big fan of ORMs like Hibernate and JPA    - Learn a new JDBC abstraction? Really!?‣   Anorm ...
Data Model             © 2011 Raible Designs   84
ScalaTest            © 2011 Raible Designs   85
Anorm in Action            © 2011 Raible Designs   86
Controller and View            © 2011 Raible Designs   87
Anorm, Dates & PostgreSQL           © 2011 Raible Designs   88
Anorm, Dates & PostgreSQL‣   Discovered “support of Date for insertion” was    added to Anorm in August 2011‣   Cloned pla...
Anorm and PostgreSQL   http://raibledesigns.com/rd/entry/play_scala_s_anorm_heroku                           © 2011 Raible...
More Scalate Goodness           © 2011 Raible Designs   91
More Scalate Goodness           © 2011 Raible Designs   92
More Scalate Goodness           © 2011 Raible Designs   93
Scalate as a Play Module   http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play                             © ...
App was still unusable‣   I still hadn’t solved the fundamental problem‣   The app couldn’t run in the background on a    ...
PhoneGap to the Rescue!           © 2011 Raible Designs   96
Requirements‣   Intel-based computer with Mac OS X Snow    Leopard (10.6)‣   Xcode‣   PhoneGap‣   Necessary for Installati...
Icons and Splash Screen            © 2011 Raible Designs   98
Background Modes          © 2011 Raible Designs   99
Success!           © 2011 Raible Designs   100
PhoneGap Writeup    http://raibledesigns.com/rd/entry/phonegap_to_the_rescue                          © 2011 Raible Design...
Was it worth it?‣   Development Hours: $$$‣   play-more.com domain: $180‣   GoPro Helmet Cam: $239‣   iOS Certified Develop...
Developing Play Morehttp://www.youtube.com/watch?v=bBqtPPfM2xQ             © 2011 Raible Designs           103
Tools        © 2011 Raible Designs   104
HTML5 vs. Native‣   If you need background services like geolocation    or audio, native is necessary‣   Can still write y...
Questions?Contact - http://raibledesigns.com - http://twitter.com/mraibleDownload - http://slideshare.net/mraible         ...
Play More!‣   Learn Something New‣   Have Fun‣   Get out there and Play!                        © 2011 Raible Designs   107
Upcoming SlideShare
Loading in...5
×

HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

36,292

Published on

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

http://www.devoxx.com/display/DV11/HTML5+with+Play+Scala%2C+CoffeeScript+and+Jade

Published in: Technology, Education
2 Comments
27 Likes
Statistics
Notes
No Downloads
Views
Total Views
36,292
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
362
Comments
2
Likes
27
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011"

  1. 1. HTML5 w/ Play Scala, CoffeeScript and JadeMatt Raiblematt@raibledesigns.com@mraiblePhotos by Trish McGinity - http://mcginityphoto.com
  2. 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. 3. MattRaible © 2011 Raible Designs
  4. 4. © 2011 Raible Designs
  5. 5. © 2011 Raible Designs
  6. 6. © 2011 Raible Designs
  7. 7. © 2011 Raible Designs
  8. 8. © 2011 Raible Designs
  9. 9. © 2011 Raible Designs
  10. 10. © 2011 Raible Designs
  11. 11. © 2011 Raible Designs
  12. 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. 13. Why am I doing this talk? © 2011 Raible Designs 13
  14. 14. Why am I doing this talk? © 2011 Raible Designs 14
  15. 15. Why am I doing this talk? © 2011 Raible Designs 15
  16. 16. Why am I doing this talk?‣ I like a Challenge to... - Learn Scala - Via Play! - And Jade is cool too! - So is CoffeeScript! © 2011 Raible Designs 16
  17. 17. Why am I doing this talk?‣ Honestly, it’s because of James Strachan... © 2011 Raible Designs 17
  18. 18. Why am I doing this talk?‣ Who likes beer too! © 2011 Raible Designs 18
  19. 19. Why am I doing this talk? © 2011 Raible Designs 19
  20. 20. What are these technologies? © 2011 Raible Designs 20
  21. 21. HTML5 http://on.wsj.com/tEGIJL © 2011 Raible Designs 21
  22. 22. 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 © 2011 Raible Designs 22
  23. 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. 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. 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. 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. 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. 28. Play ScalaBut really, it’s more like this © 2011 Raible Designs 28
  29. 29. Play Scala © 2011 Raible Designs 29
  30. 30. 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 © 2011 Raible Designs 30
  31. 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. 32. Scala vs. Java © 2011 Raible Designs 32
  33. 33. Play with Scala © 2011 Raible Designs 33
  34. 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. 35. CoffeeScript © 2011 Raible Designs 35
  36. 36. JavaScript: The Good Parts © 2011 Raible Designs 36
  37. 37. Jade © 2011 Raible Designs 37
  38. 38. Jade Example © 2011 Raible Designs 38
  39. 39. CoffeeBar © 2011 Raible Designs 39
  40. 40. My Development Experience © 2011 Raible Designs 40
  41. 41. Getting Started © 2011 Raible Designs 41
  42. 42. Developing with Play Scala © 2011 Raible Designs 42
  43. 43. Tools I started with... © 2011 Raible Designs 43
  44. 44. Scalate Module © 2011 Raible Designs 44
  45. 45. Scalate Integration Solution © 2011 Raible Designs 45
  46. 46. Integrating Scalate with Play play deps --sync © 2011 Raible Designs 46
  47. 47. Integrating Scalate with Play © 2011 Raible Designs 47
  48. 48. Integrating Scalate with Play © 2011 Raible Designs 48
  49. 49. 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) © 2011 Raible Designs
  50. 50. Integrating Scalate with Play http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with © 2011 Raible Designs 50
  51. 51. Play 2.0 © 2011 Raible Designs 51
  52. 52. Play 2.0 © 2011 Raible Designs 52
  53. 53. Play 2.0 Beta © 2011 Raible Designs 53
  54. 54. A Nice Break ... © 2011 Raible Designs 54
  55. 55. CoffeeScript with Play © 2011 Raible Designs 55
  56. 56. CoffeeScript with Play http://raibledesigns.com/rd/entry/trying_to_make_coffeescript_work © 2011 Raible Designs 56
  57. 57. My Development Experience © 2011 Raible Designs 57
  58. 58. © 2011 Raible Designs
  59. 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. 60. Scalate Layouts © 2011 Raible Designs 60
  61. 61. HTML5 Boilerplate http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate © 2011 Raible Designs 61
  62. 62. HTML5 Development © 2011 Raible Designs 62
  63. 63. StopWatch with Coffee © 2011 Raible Designs 63
  64. 64. Jade Template for Watch © 2011 Raible Designs 64
  65. 65. HTML5 Development © 2011 Raible Designs 65
  66. 66. HTML5 Geo API © 2011 Raible Designs 66
  67. 67. Google Maps JS API © 2011 Raible Designs 67
  68. 68. Jade View for Map © 2011 Raible Designs 68
  69. 69. HTML5 Development © 2011 Raible Designs 69
  70. 70. Odometer © 2011 Raible Designs 70
  71. 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. 72. Discovered‣ HTML5 Geolocation was highly inaccurate - Fixed by passing {enableHighAccuracy: true} to navigator.geolocation.watchPosition() © 2011 Raible Designs 72
  73. 73. Discovered © 2011 Raible Designs 73
  74. 74. Show Stopper?‣ Geolocation doesn’t run in the background © 2011 Raible Designs 74
  75. 75. Making it look good © 2011 Raible Designs 75
  76. 76. Twitter’s Bootstrap © 2011 Raible Designs 76
  77. 77. Bootstrap © 2011 Raible Designs 77
  78. 78. LESS © 2011 Raible Designs 78
  79. 79. LESS © 2011 Raible Designs 79
  80. 80. CSS3 Media Queries © 2011 Raible Designs 80
  81. 81. HTML5 Features‣ Geolocation‣ CSS 3‣ Audio‣ History‣ Local Storage‣ Canvas © 2011 Raible Designs 81
  82. 82. HTML5 and Bootstrap http://raibledesigns.com/rd/entry/developing_with_html5_coffeescript_and © 2011 Raible Designs 82
  83. 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. 84. Data Model © 2011 Raible Designs 84
  85. 85. ScalaTest © 2011 Raible Designs 85
  86. 86. Anorm in Action © 2011 Raible Designs 86
  87. 87. Controller and View © 2011 Raible Designs 87
  88. 88. Anorm, Dates & PostgreSQL © 2011 Raible Designs 88
  89. 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. 90. Anorm and PostgreSQL http://raibledesigns.com/rd/entry/play_scala_s_anorm_heroku © 2011 Raible Designs 90
  91. 91. More Scalate Goodness © 2011 Raible Designs 91
  92. 92. More Scalate Goodness © 2011 Raible Designs 92
  93. 93. More Scalate Goodness © 2011 Raible Designs 93
  94. 94. Scalate as a Play Module http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play © 2011 Raible Designs 94
  95. 95. App was still unusable‣ 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. 96. PhoneGap to the Rescue! © 2011 Raible Designs 96
  97. 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. 98. Icons and Splash Screen © 2011 Raible Designs 98
  99. 99. Background Modes © 2011 Raible Designs 99
  100. 100. Success! © 2011 Raible Designs 100
  101. 101. PhoneGap Writeup http://raibledesigns.com/rd/entry/phonegap_to_the_rescue © 2011 Raible Designs 101
  102. 102. Was it worth it?‣ 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. 103. Developing Play Morehttp://www.youtube.com/watch?v=bBqtPPfM2xQ © 2011 Raible Designs 103
  104. 104. Tools © 2011 Raible Designs 104
  105. 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. 106. Questions?Contact - http://raibledesigns.com - http://twitter.com/mraibleDownload - http://slideshare.net/mraible © 2011 Raible Designs 106
  107. 107. Play More!‣ Learn Something New‣ Have Fun‣ Get out there and Play! © 2011 Raible Designs 107
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×