HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012

with Play Scala, CoffeeScript and JadeMatt Raiblehttp://raibledesigns.comPhotos by Trish - http://mcginityphoto.com

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-ﬂy‣ 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

Mailing List Trafﬁc 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

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

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

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

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

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

Anorm, Dates & PostgreSQL‣ Discovered “support of Date for insertion” was added to Anorm in August 2011‣ Cloned play-scala, built locally and uploaded‣ Modiﬁed dependencies.yml to use new version © 2012 Raible Designs 82

Lessons Learned‣ Develop Mobile Client ﬁrst‣ 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

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

http://raibledesigns.com	30085
http://css.dzone.com	3077
http://www.raibledesigns.com	1470
http://java.dzone.com	481
http://therichwebexperience.com	256
http://www.oyous.com	250
http://www.nofluffjuststuff.com	81
http://uberconf.com	68
http://localhost	66
http://www.scoop.it	49
http://lanyrd.com	26
http://freerss.net	25
https://booster-sqli.bluekiwi.net	25
http://www.lynden.com	22
http://www.springone2gx.com	14
http://translate.googleusercontent.com	14
http://webcache.googleusercontent.com	13
http://www.hanrss.com	13
http://www.mybestcv.co.il	8
http://science.webhostinggeeks.com	8
http://projectautomationexperience.com	8
http://www.rss4java.com	7
http://127.0.0.1	6
http://www.newsblur.com	5
http://continuousdeliveryexperience.com	4
http://gradlesummit.com	4
http://apps.synaptive.net	3
http://optimizelyedit.appspot.com	3
http://www.onlydoo.com	2
http://endurant2.rssing.com	2
http://cache.baidu.com	2
http://www.dzone.com	2
http://webcache-exp-test.googleusercontent.com	2
http://www.directrss.co.il	2
http://reader.nunux.org	1
http://www.daen.ch	1
http://74.6.116.71	1
http://www.syndic8.com	1
http://emballonuridae2.rssing.com	1
http://cache.yahoofs.jp	1
http://newsblur.com	1
http://wse.baidu.com	1
http://biliousness2.rssing.com	1

HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012

by Matt Raible

Accessibility

Categories

Upload Details

Usage Rights

43 Embeds 36,112

Statistics

HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012 Presentation Transcript