SlideShare ist ein Scribd-Unternehmen logo
1 von 107
Downloaden Sie, um offline zu lesen
HTML5 w/ Play Scala, CoffeeScript and Jade

Matt Raible

matt@raibledesigns.com
@mraible
Photos by Trish McGinity - http://mcginityphoto.com
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
Matt
Raible
  © 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
‣   Q and A
‣   Conclusion

                        © 2011 Raible Designs   12
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 is CoffeeScript!




                            © 2011 Raible Designs   16
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> <details>

<applet> <center> <font>
<frame> <frameset>
http://www.w3schools.com/html5/html5_reference.asp

                                            © 2011 Raible Designs   22
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
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
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
Weighted Results

‣   Grails (90)
‣   Spring MVC (85)
‣   Ruby on Rails (82.5)
‣   Vaadin (82.5)
‣   Play (82.5)
‣   GWT (80)


                           © 2011 Raible Designs   26
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
Play Scala



But 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 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
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
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 - Cay Horstmann
‣   Programming in Scala, 2nd Edition - Martin
    Odersky, Lex Spoon, and Bill Venners
‣   Twitter’s Scala School



                         © 2011 Raible Designs   34
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 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
Integrating Scalate with Play




   http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with
                              © 2011 Raible Designs                      50
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

                             © 2011 Raible Designs                      56
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-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
Scalate Layouts




            © 2011 Raible Designs   60
HTML5 Boilerplate




  http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate
                                © 2011 Raible Designs                            61
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 to end w/o waypoints
‣   To Visualize: integrated odometer with maps
    using Google Maps Polylines




                          © 2011 Raible Designs       71
Discovered

‣   HTML5 Geolocation was highly inaccurate
    - Fixed by passing {enableHighAccuracy: true} to
      navigator.geolocation.watchPosition()




                          © 2011 Raible Designs        72
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 Designs   81
HTML5 and Bootstrap




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

                               © 2011 Raible Designs                         82
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
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 play-scala, built locally and uploaded
‣   Modified dependencies.yml to use new version




                        © 2011 Raible Designs        89
Anorm and PostgreSQL




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


                           © 2011 Raible Designs                 90
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


                             © 2011 Raible Designs                    94
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
PhoneGap to the Rescue!




           © 2011 Raible Designs   96
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
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 Designs                101
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
Developing Play More
http://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 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
Questions?

Contact
 - http://raibledesigns.com
 - http://twitter.com/mraible

Download
 - http://slideshare.net/mraible



                        © 2011 Raible Designs   106
Play More!
‣   Learn Something New
‣   Have Fun
‣   Get out there and Play!




                        © 2011 Raible Designs   107

Weitere ähnliche Inhalte

Andere mochten auch

Your First Scala Web Application using Play 2.1
Your First Scala Web Application using Play 2.1Your First Scala Web Application using Play 2.1
Your First Scala Web Application using Play 2.1Matthew Barlocker
 
Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.Eng Chrispinus Onyancha
 
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVM
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVMVoxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVM
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVMManuel Bernhardt
 
Введение в Akka
Введение в AkkaВведение в Akka
Введение в AkkaZheka Kozlov
 
Reactive Web-Applications @ LambdaDays
Reactive Web-Applications @ LambdaDaysReactive Web-Applications @ LambdaDays
Reactive Web-Applications @ LambdaDaysManuel Bernhardt
 
Dependency injection in scala
Dependency injection in scalaDependency injection in scala
Dependency injection in scalaMichal Bigos
 
Язык программирования Scala / Владимир Успенский (TCS Bank)
Язык программирования Scala / Владимир Успенский (TCS Bank)Язык программирования Scala / Владимир Успенский (TCS Bank)
Язык программирования Scala / Владимир Успенский (TCS Bank)Ontico
 
Composable and streamable Play apps
Composable and streamable Play appsComposable and streamable Play apps
Composable and streamable Play appsYevgeniy Brikman
 
The Modern Java Web Developer Bootcamp - Devoxx 2013
The Modern Java Web Developer Bootcamp - Devoxx 2013The Modern Java Web Developer Bootcamp - Devoxx 2013
The Modern Java Web Developer Bootcamp - Devoxx 2013Matt Raible
 
The Modern Java Web Developer - JavaOne 2013
The Modern Java Web Developer - JavaOne 2013The Modern Java Web Developer - JavaOne 2013
The Modern Java Web Developer - JavaOne 2013Matt Raible
 
Practical Akka HTTP - introduction
Practical Akka HTTP - introductionPractical Akka HTTP - introduction
Practical Akka HTTP - introductionŁukasz Sowa
 
Securing Microservices using Play and Akka HTTP
Securing Microservices using Play and Akka HTTPSecuring Microservices using Play and Akka HTTP
Securing Microservices using Play and Akka HTTPRafal Gancarz
 
Akka Streams and HTTP
Akka Streams and HTTPAkka Streams and HTTP
Akka Streams and HTTPRoland Kuhn
 
Building scalable rest service using Akka HTTP
Building scalable rest service using Akka HTTPBuilding scalable rest service using Akka HTTP
Building scalable rest service using Akka HTTPdatamantra
 
Building a Reactive RESTful API with Akka Http & Slick
Building a Reactive RESTful API with Akka Http & SlickBuilding a Reactive RESTful API with Akka Http & Slick
Building a Reactive RESTful API with Akka Http & SlickZalando Technology
 

Andere mochten auch (20)

Your First Scala Web Application using Play 2.1
Your First Scala Web Application using Play 2.1Your First Scala Web Application using Play 2.1
Your First Scala Web Application using Play 2.1
 
Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.
 
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVM
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVMVoxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVM
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVM
 
Введение в Akka
Введение в AkkaВведение в Akka
Введение в Akka
 
Reactive Web-Applications @ LambdaDays
Reactive Web-Applications @ LambdaDaysReactive Web-Applications @ LambdaDays
Reactive Web-Applications @ LambdaDays
 
Akka-http
Akka-httpAkka-http
Akka-http
 
Lagom in Practice
Lagom in PracticeLagom in Practice
Lagom in Practice
 
Dependency injection in scala
Dependency injection in scalaDependency injection in scala
Dependency injection in scala
 
Akka http 2
Akka http 2Akka http 2
Akka http 2
 
Язык программирования Scala / Владимир Успенский (TCS Bank)
Язык программирования Scala / Владимир Успенский (TCS Bank)Язык программирования Scala / Владимир Успенский (TCS Bank)
Язык программирования Scala / Владимир Успенский (TCS Bank)
 
Composable and streamable Play apps
Composable and streamable Play appsComposable and streamable Play apps
Composable and streamable Play apps
 
Akka http
Akka httpAkka http
Akka http
 
The Modern Java Web Developer Bootcamp - Devoxx 2013
The Modern Java Web Developer Bootcamp - Devoxx 2013The Modern Java Web Developer Bootcamp - Devoxx 2013
The Modern Java Web Developer Bootcamp - Devoxx 2013
 
The Modern Java Web Developer - JavaOne 2013
The Modern Java Web Developer - JavaOne 2013The Modern Java Web Developer - JavaOne 2013
The Modern Java Web Developer - JavaOne 2013
 
Practical Akka HTTP - introduction
Practical Akka HTTP - introductionPractical Akka HTTP - introduction
Practical Akka HTTP - introduction
 
Securing Microservices using Play and Akka HTTP
Securing Microservices using Play and Akka HTTPSecuring Microservices using Play and Akka HTTP
Securing Microservices using Play and Akka HTTP
 
Akka Streams and HTTP
Akka Streams and HTTPAkka Streams and HTTP
Akka Streams and HTTP
 
Building scalable rest service using Akka HTTP
Building scalable rest service using Akka HTTPBuilding scalable rest service using Akka HTTP
Building scalable rest service using Akka HTTP
 
Akka HTTP
Akka HTTPAkka HTTP
Akka HTTP
 
Building a Reactive RESTful API with Akka Http & Slick
Building a Reactive RESTful API with Akka Http & SlickBuilding a Reactive RESTful API with Akka Http & Slick
Building a Reactive RESTful API with Akka Http & Slick
 

Ähnlich wie HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

Comparing JVM Web Frameworks - Jfokus 2012
Comparing JVM Web Frameworks - Jfokus 2012Comparing JVM Web Frameworks - Jfokus 2012
Comparing JVM Web Frameworks - Jfokus 2012Matt Raible
 
Comparing JVM Web Frameworks - Spring I/O 2012
Comparing JVM Web Frameworks - Spring I/O 2012Comparing JVM Web Frameworks - Spring I/O 2012
Comparing JVM Web Frameworks - Spring I/O 2012Matt Raible
 
Apache Sling : JCR, OSGi, Scripting and REST
Apache Sling : JCR, OSGi, Scripting and RESTApache Sling : JCR, OSGi, Scripting and REST
Apache Sling : JCR, OSGi, Scripting and RESTCarsten Ziegeler
 
Spring Data and MongoDB
Spring Data and MongoDBSpring Data and MongoDB
Spring Data and MongoDBOliver Gierke
 
Hybrid User Forum survey Results
Hybrid User Forum survey ResultsHybrid User Forum survey Results
Hybrid User Forum survey Resultshybriduserforum
 

Ähnlich wie HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011 (8)

Comparing JVM Web Frameworks - Jfokus 2012
Comparing JVM Web Frameworks - Jfokus 2012Comparing JVM Web Frameworks - Jfokus 2012
Comparing JVM Web Frameworks - Jfokus 2012
 
Comparing JVM Web Frameworks - Spring I/O 2012
Comparing JVM Web Frameworks - Spring I/O 2012Comparing JVM Web Frameworks - Spring I/O 2012
Comparing JVM Web Frameworks - Spring I/O 2012
 
Apache Sling : JCR, OSGi, Scripting and REST
Apache Sling : JCR, OSGi, Scripting and RESTApache Sling : JCR, OSGi, Scripting and REST
Apache Sling : JCR, OSGi, Scripting and REST
 
Spring Data and MongoDB
Spring Data and MongoDBSpring Data and MongoDB
Spring Data and MongoDB
 
Hybrid User Forum survey Results
Hybrid User Forum survey ResultsHybrid User Forum survey Results
Hybrid User Forum survey Results
 
Day 6 graphing review
Day 6 graphing reviewDay 6 graphing review
Day 6 graphing review
 
080808
080808080808
080808
 
Nate tech deck
Nate tech deckNate tech deck
Nate tech deck
 

Mehr von Matt Raible

Keep Identities in Sync the SCIMple Way - ApacheCon NA 2022
Keep Identities in Sync the SCIMple Way - ApacheCon NA 2022Keep Identities in Sync the SCIMple Way - ApacheCon NA 2022
Keep Identities in Sync the SCIMple Way - ApacheCon NA 2022Matt Raible
 
Micro Frontends for Java Microservices - Belfast JUG 2022
Micro Frontends for Java Microservices - Belfast JUG 2022Micro Frontends for Java Microservices - Belfast JUG 2022
Micro Frontends for Java Microservices - Belfast JUG 2022Matt Raible
 
Micro Frontends for Java Microservices - Dublin JUG 2022
Micro Frontends for Java Microservices - Dublin JUG 2022Micro Frontends for Java Microservices - Dublin JUG 2022
Micro Frontends for Java Microservices - Dublin JUG 2022Matt Raible
 
Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022Matt Raible
 
Comparing Native Java REST API Frameworks - Seattle JUG 2022
Comparing Native Java REST API Frameworks - Seattle JUG 2022Comparing Native Java REST API Frameworks - Seattle JUG 2022
Comparing Native Java REST API Frameworks - Seattle JUG 2022Matt Raible
 
Reactive Java Microservices with Spring Boot and JHipster - Spring I/O 2022
Reactive Java Microservices with Spring Boot and JHipster - Spring I/O 2022Reactive Java Microservices with Spring Boot and JHipster - Spring I/O 2022
Reactive Java Microservices with Spring Boot and JHipster - Spring I/O 2022Matt Raible
 
Comparing Native Java REST API Frameworks - Devoxx France 2022
Comparing Native Java REST API Frameworks - Devoxx France 2022Comparing Native Java REST API Frameworks - Devoxx France 2022
Comparing Native Java REST API Frameworks - Devoxx France 2022Matt Raible
 
Lock That Sh*t Down! Auth Security Patterns for Apps, APIs, and Infra - Devne...
Lock That Sh*t Down! Auth Security Patterns for Apps, APIs, and Infra - Devne...Lock That Sh*t Down! Auth Security Patterns for Apps, APIs, and Infra - Devne...
Lock That Sh*t Down! Auth Security Patterns for Apps, APIs, and Infra - Devne...Matt Raible
 
Java REST API Framework Comparison - PWX 2021
Java REST API Framework Comparison - PWX 2021Java REST API Framework Comparison - PWX 2021
Java REST API Framework Comparison - PWX 2021Matt Raible
 
Web App Security for Java Developers - PWX 2021
Web App Security for Java Developers - PWX 2021Web App Security for Java Developers - PWX 2021
Web App Security for Java Developers - PWX 2021Matt Raible
 
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...Matt Raible
 
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...Matt Raible
 
Web App Security for Java Developers - UberConf 2021
Web App Security for Java Developers - UberConf 2021Web App Security for Java Developers - UberConf 2021
Web App Security for Java Developers - UberConf 2021Matt Raible
 
Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021Matt Raible
 
Native Java with Spring Boot and JHipster - SF JUG 2021
Native Java with Spring Boot and JHipster - SF JUG 2021Native Java with Spring Boot and JHipster - SF JUG 2021
Native Java with Spring Boot and JHipster - SF JUG 2021Matt Raible
 
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...Matt Raible
 
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021Matt Raible
 
Get Hip with JHipster - Colorado Springs Open Source User Group 2021
Get Hip with JHipster - Colorado Springs Open Source User Group 2021Get Hip with JHipster - Colorado Springs Open Source User Group 2021
Get Hip with JHipster - Colorado Springs Open Source User Group 2021Matt Raible
 
JHipster and Okta - JHipster Virtual Meetup December 2020
JHipster and Okta - JHipster Virtual Meetup December 2020JHipster and Okta - JHipster Virtual Meetup December 2020
JHipster and Okta - JHipster Virtual Meetup December 2020Matt Raible
 
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020Matt Raible
 

Mehr von Matt Raible (20)

Keep Identities in Sync the SCIMple Way - ApacheCon NA 2022
Keep Identities in Sync the SCIMple Way - ApacheCon NA 2022Keep Identities in Sync the SCIMple Way - ApacheCon NA 2022
Keep Identities in Sync the SCIMple Way - ApacheCon NA 2022
 
Micro Frontends for Java Microservices - Belfast JUG 2022
Micro Frontends for Java Microservices - Belfast JUG 2022Micro Frontends for Java Microservices - Belfast JUG 2022
Micro Frontends for Java Microservices - Belfast JUG 2022
 
Micro Frontends for Java Microservices - Dublin JUG 2022
Micro Frontends for Java Microservices - Dublin JUG 2022Micro Frontends for Java Microservices - Dublin JUG 2022
Micro Frontends for Java Microservices - Dublin JUG 2022
 
Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022
 
Comparing Native Java REST API Frameworks - Seattle JUG 2022
Comparing Native Java REST API Frameworks - Seattle JUG 2022Comparing Native Java REST API Frameworks - Seattle JUG 2022
Comparing Native Java REST API Frameworks - Seattle JUG 2022
 
Reactive Java Microservices with Spring Boot and JHipster - Spring I/O 2022
Reactive Java Microservices with Spring Boot and JHipster - Spring I/O 2022Reactive Java Microservices with Spring Boot and JHipster - Spring I/O 2022
Reactive Java Microservices with Spring Boot and JHipster - Spring I/O 2022
 
Comparing Native Java REST API Frameworks - Devoxx France 2022
Comparing Native Java REST API Frameworks - Devoxx France 2022Comparing Native Java REST API Frameworks - Devoxx France 2022
Comparing Native Java REST API Frameworks - Devoxx France 2022
 
Lock That Sh*t Down! Auth Security Patterns for Apps, APIs, and Infra - Devne...
Lock That Sh*t Down! Auth Security Patterns for Apps, APIs, and Infra - Devne...Lock That Sh*t Down! Auth Security Patterns for Apps, APIs, and Infra - Devne...
Lock That Sh*t Down! Auth Security Patterns for Apps, APIs, and Infra - Devne...
 
Java REST API Framework Comparison - PWX 2021
Java REST API Framework Comparison - PWX 2021Java REST API Framework Comparison - PWX 2021
Java REST API Framework Comparison - PWX 2021
 
Web App Security for Java Developers - PWX 2021
Web App Security for Java Developers - PWX 2021Web App Security for Java Developers - PWX 2021
Web App Security for Java Developers - PWX 2021
 
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...
 
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...
 
Web App Security for Java Developers - UberConf 2021
Web App Security for Java Developers - UberConf 2021Web App Security for Java Developers - UberConf 2021
Web App Security for Java Developers - UberConf 2021
 
Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021
 
Native Java with Spring Boot and JHipster - SF JUG 2021
Native Java with Spring Boot and JHipster - SF JUG 2021Native Java with Spring Boot and JHipster - SF JUG 2021
Native Java with Spring Boot and JHipster - SF JUG 2021
 
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...
 
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
 
Get Hip with JHipster - Colorado Springs Open Source User Group 2021
Get Hip with JHipster - Colorado Springs Open Source User Group 2021Get Hip with JHipster - Colorado Springs Open Source User Group 2021
Get Hip with JHipster - Colorado Springs Open Source User Group 2021
 
JHipster and Okta - JHipster Virtual Meetup December 2020
JHipster and Okta - JHipster Virtual Meetup December 2020JHipster and Okta - JHipster Virtual Meetup December 2020
JHipster and Okta - JHipster Virtual Meetup December 2020
 
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020
 

Kürzlich hochgeladen

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Kürzlich hochgeladen (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

  • 1. HTML5 w/ Play Scala, 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 Raible Designs
  • 5. © 2011 Raible Designs
  • 6. © 2011 Raible Designs
  • 7. © 2011 Raible Designs
  • 8. © 2011 Raible Designs
  • 9. © 2011 Raible Designs
  • 10. © 2011 Raible Designs
  • 11. © 2011 Raible Designs
  • 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 I doing this talk? © 2011 Raible Designs 13
  • 14. Why am I doing this talk? © 2011 Raible Designs 14
  • 15. Why am I doing this talk? © 2011 Raible Designs 15
  • 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. Why am I doing this talk? ‣ Honestly, it’s because of James Strachan... © 2011 Raible Designs 17
  • 18. Why am I doing this talk? ‣ Who likes beer too! © 2011 Raible Designs 18
  • 19. Why am I doing this talk? © 2011 Raible Designs 19
  • 20. What are these technologies? © 2011 Raible Designs 20
  • 21. HTML5 http://on.wsj.com/tEGIJL © 2011 Raible Designs 21
  • 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. 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 is like 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 Good Parts © 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 Play Scala © 2011 Raible Designs 42
  • 43. Tools I started with... © 2011 Raible Designs 43
  • 44. Scalate Module © 2011 Raible Designs 44
  • 45. Scalate Integration Solution © 2011 Raible Designs 45
  • 46. Integrating Scalate with Play play deps --sync © 2011 Raible Designs 46
  • 47. Integrating Scalate with Play © 2011 Raible Designs 47
  • 48. Integrating Scalate with Play © 2011 Raible Designs 48
  • 49. Cannot start in PROD 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 with Play 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 Raible Designs
  • 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 for Watch © 2011 Raible Designs 64
  • 65. HTML5 Development © 2011 Raible Designs 65
  • 66. HTML5 Geo API © 2011 Raible Designs 66
  • 67. Google Maps JS API © 2011 Raible Designs 67
  • 68. Jade View for Map © 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 look good © 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 a Play Module http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play © 2011 Raible Designs 94
  • 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. PhoneGap to the Rescue! © 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 Splash Screen © 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 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
  • 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