SlideShare a Scribd company logo
1 of 113
Download to read offline
with Play Scala, CoffeeScript and Jade




Matt Raible
http://raibledesigns.com




Photos by Trish - http://mcginityphoto.com
Introductions

‣   Have you used HTML5?
‣   Have you used Play
    Framework?
‣   Have you tried Scala?
‣   Tried CoffeeScript?
‣   Scalate or Jade?



                          © 2012 Raible Designs   2
Who is Matt Raible?
                                              Father, Skier, Cyclist




                     Web Framework Connoisseur
Founder of AppFuse




  Blogger on raibledesigns.com
                      © 2012 Raible Designs
Agenda

‣   Introductions
‣   Why am I doing this talk?
‣   What are these technologies?
‣   My Development Experience
‣   Demo
‣   Q and A
‣   Conclusion

                        © 2012 Raible Designs   4
Why am I doing this talk?




            © 2012 Raible Designs   5
Why ÜberConf?




          © 2012 Raible Designs   6
Why am I doing this talk?




            © 2012 Raible Designs   7
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
Why am I doing this talk?
‣   Honestly, it’s because of James Strachan...




                        © 2012 Raible Designs     9
Why am I doing this talk?




            © 2012 Raible Designs   10
What are these technologies?




             © 2012 Raible Designs   11
HTML5




        http://on.wsj.com/tEGIJL
            © 2012 Raible Designs   12
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
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
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
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
Weighted Results

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


                           © 2012 Raible Designs   17
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
Play Scala



But really, it’s more like this




                            © 2012 Raible Designs   19
Play Scala




             © 2012 Raible Designs   20
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




                        © 2012 Raible Designs               21
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
Scala vs. Java




            © 2012 Raible Designs   23
Play with Scala




            © 2012 Raible Designs   24
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
CoffeeScript




               © 2012 Raible Designs   26
JavaScript: The Good Parts




            © 2012 Raible Designs   27
Jade




       © 2012 Raible Designs   28
Jade Example




           © 2012 Raible Designs   29
My Development Experience




            © 2012 Raible Designs   30
Getting Started




            © 2012 Raible Designs   31
Developing with Play Scala




            © 2012 Raible Designs   32
Tools I started with...




              © 2012 Raible Designs   33
Scalate Module




           © 2012 Raible Designs   34
Scalate Integration Solution




             © 2012 Raible Designs   35
Integrating Scalate with Play




         play deps --sync



              © 2012 Raible Designs   36
Integrating Scalate with Play




             © 2012 Raible Designs   37
Integrating Scalate with Play




             © 2012 Raible Designs   38
http://blog.heroku.com/archives/2011/8/29/play/




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)




                                         © 2012 Raible Designs
Integrating Scalate with Play




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

                              © 2012 Raible Designs                      40
Play 2.0




           © 2012 Raible Designs   41
Play 2.0




           © 2012 Raible Designs   42
Play 2.0




           © 2012 Raible Designs   43
Play 2.0 Beta




       http://raibledesigns.com/rd/entry/play_2_0_a_web
                      © 2012 Raible Designs               44
A Nice Break ...




             © 2012 Raible Designs   45
CoffeeScript with Play




            © 2012 Raible Designs   46
CoffeeScript with Play




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

                             © 2012 Raible Designs                      47
My Development Experience




            © 2012 Raible Designs   48
© 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             50
Scalate Layouts




            © 2012 Raible Designs   51
HTML5 Boilerplate




  http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate
                                © 2012 Raible Designs                            52
HTML5 Development




          © 2012 Raible Designs   53
StopWatch with Coffee




           © 2012 Raible Designs   54
Jade Template for Watch




            © 2012 Raible Designs   55
HTML5 Development




          © 2012 Raible Designs   56
HTML5 Geo API




          © 2012 Raible Designs   57
Google Maps JS API




           © 2012 Raible Designs   58
Jade View for Map




           © 2012 Raible Designs   59
HTML5 Development




          © 2012 Raible Designs   60
Odometer




           © 2012 Raible Designs   61
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
Discovered

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




                          © 2012 Raible Designs        63
Discovered




             © 2012 Raible Designs   64
Show Stopper?
‣   Geolocation doesn’t run in the background




                       © 2012 Raible Designs    65
Making it look good




            © 2012 Raible Designs   66
Twitter’s Bootstrap




             © 2012 Raible Designs   67
Bootstrap




            © 2012 Raible Designs   68
LESS




       © 2012 Raible Designs   69
LESS




       © 2012 Raible Designs   70
CSS3 Media Queries




           © 2012 Raible Designs   71
HTML5 Features

‣   Geolocation
‣   CSS 3
‣   Audio
‣   History
‣   Local Storage
‣   Canvas


                    © 2012 Raible Designs   72
HTML5 and Bootstrap




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

                               © 2012 Raible Designs                         73
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
Data Model




             © 2012 Raible Designs   75
ScalaTest




            © 2012 Raible Designs   76
Anorm in Action




            © 2012 Raible Designs   77
Controller and View




            © 2012 Raible Designs   78
Anorm, Dates & PostgreSQL




           © 2012 Raible Designs   79
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
Anorm and PostgreSQL




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


                           © 2012 Raible Designs                 81
More Scalate Goodness




           © 2012 Raible Designs   82
More Scalate Goodness




           © 2012 Raible Designs   83
More Scalate Goodness




           © 2012 Raible Designs   84
Scalate as a Play Module




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


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




           © 2012 Raible Designs   87
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
Icons and Splash Screen




            © 2012 Raible Designs   89
Background Modes




          © 2012 Raible Designs   90
Success!




           © 2012 Raible Designs   91
PhoneGap Writeup




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


                          © 2012 Raible Designs                92
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
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
Upgrading to Play 2.0




            © 2012 Raible Designs   95
Upgrading to Play 2.0




  “If it's a critical project, to be finished before
   next March 2012, I would go with Play 1.x.”



                      © 2012 Raible Designs           96
JSON Services




           © 2012 Raible Designs   97
API Tests




            © 2012 Raible Designs   98
Secure Social




            © 2012 Raible Designs   99
Secure Social




            © 2012 Raible Designs   100
Secure Social




   http://raibledesigns.com/rd/entry/secure_json_services_with_play
                             © 2012 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 Jfokus: Awesome!



                       © 2012 Raible Designs   102
Developing Play More




       http://vimeo.com/36826202

                © 2012 Raible Designs   103
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
Upgrading to Play 2




    http://raibledesigns.com/rd/entry/upgrading_to_play_2_anorm
                            © 2012 Raible Designs                 105
Tools




        © 2012 Raible Designs   106
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
What didn’t work?




            © 2012 Raible Designs   108
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
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
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
Questions?

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

Presentation
 - http://slideshare.net/mraible


Source
 - https://github.com/mraible/play-more

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




                        © 2012 Raible Designs   113

More Related Content

Similar to HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012

Spring Data and MongoDB
Spring Data and MongoDBSpring Data and MongoDB
Spring Data and MongoDBOliver Gierke
 
What's New in Cloud Foundry
What's New in Cloud FoundryWhat's New in Cloud Foundry
What's New in Cloud FoundryJennifer Hickey
 
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
 
Cloud Foundry Architecture and Overview
Cloud Foundry Architecture and OverviewCloud Foundry Architecture and Overview
Cloud Foundry Architecture and Overviewrajdeep
 
Thinking Outside the Container: Deploying Standalone Apps to Cloud Foundry
Thinking Outside the Container: Deploying Standalone Apps to Cloud FoundryThinking Outside the Container: Deploying Standalone Apps to Cloud Foundry
Thinking Outside the Container: Deploying Standalone Apps to Cloud FoundryJennifer Hickey
 
Comparing JVM Web Frameworks - Devoxx France 2013
Comparing JVM Web Frameworks - Devoxx France 2013Comparing JVM Web Frameworks - Devoxx France 2013
Comparing JVM Web Frameworks - Devoxx France 2013Matt Raible
 
Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014Matt Raible
 

Similar to HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012 (7)

Spring Data and MongoDB
Spring Data and MongoDBSpring Data and MongoDB
Spring Data and MongoDB
 
What's New in Cloud Foundry
What's New in Cloud FoundryWhat's New in Cloud Foundry
What's New in Cloud Foundry
 
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
 
Cloud Foundry Architecture and Overview
Cloud Foundry Architecture and OverviewCloud Foundry Architecture and Overview
Cloud Foundry Architecture and Overview
 
Thinking Outside the Container: Deploying Standalone Apps to Cloud Foundry
Thinking Outside the Container: Deploying Standalone Apps to Cloud FoundryThinking Outside the Container: Deploying Standalone Apps to Cloud Foundry
Thinking Outside the Container: Deploying Standalone Apps to Cloud Foundry
 
Comparing JVM Web Frameworks - Devoxx France 2013
Comparing JVM Web Frameworks - Devoxx France 2013Comparing JVM Web Frameworks - Devoxx France 2013
Comparing JVM Web Frameworks - Devoxx France 2013
 
Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014
 

More from 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
 

More from 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
 

Recently uploaded

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
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
 
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
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
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
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
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
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
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
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
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
 
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
 
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
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 

Recently uploaded (20)

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
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
 
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
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
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
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
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
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
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
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
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
 
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
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
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™
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 

HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012

  • 1. with Play Scala, CoffeeScript and Jade Matt Raible http://raibledesigns.com Photos 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 Connoisseur Founder 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 Scala But 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 kill you, 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 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) © 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 it's 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 - @mraible Presentation - http://slideshare.net/mraible Source - 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