Want to dive even deeper?

Take the course Building an Application with CoffeeScript by Darko and become an expert!
Building an Application with CoffeeScript
by Darko

Check it out!
You're watching a preview of this video, click the button on the left to puchase the full version from JavaPolis'06.

HTML5 with Play/Scala, CoffeeScript and Jade

This session shows you how to use some of the hottest technologies today to build a webapp, an API and a mobile application to track fitness workouts. Using HTML5 technologies (specifically geo and local storage), I’ll show you how you can track the time, distance and music you listened to while exercising. Play with Scala is used for the backend and services, while CoffeeScript and Jade are used for the front-end templating and Ajax communication.

Published on
  • 4.441
  • 105
  • 0
  • 21
  • 7
  • 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 13.5 9 15.5 15 15 14.5 14 14 13.513.5 11.5 4.5 0 2 din ry g s ails Ra ils ck et Pla ipe Fle Sp rin GW est Va a Gr uts Tap Str Str Wi JS Lift x T F y © 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 GWT Grails Rails Tapestry Play 0 475 950 1841 1753 1635 1604 1538 1451 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
  • © 2011 Raible Designs
  • 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 cp cp cp cp cp cp cp cp $boilerplate-download 404.html ~/dev/play-more/app/views/errors/404.html *.png ~/dev/play-more/public/. crossdomain.xml ~/dev/play-more/public/. -r css ~/dev/play-more/public/stylesheets/. favicon.ico ~/dev/play-more/public/. humans.txt ~/dev/play-more/public/. -r js/libs ~/dev/play-more/public/javascripts/. 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
  • 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 97 © 2011 Raible Designs
  • 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 101 © 2011 Raible Designs
  • 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
  • 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

Comments

Be the first one to add a comment

Thumbnail for: One Framework, No Dependencies: Using Frameworks to Avoid Common Pitfalls of App Development

One Framework, No Dependencies: Using Frameworks to Avoid Common Pitfalls of App Development

Lee Boonstra

free
Thumbnail for: Java EE Game Changers

Java EE Game Changers

David Blevins

free
Thumbnail for: Five Ways to Not Suck at Being a Java Freelancer

Five Ways to Not Suck at Being a Java Freelancer

Roberto Cortez

free
Thumbnail for: Express yourself with Java 8

Express yourself with Java 8

Benjamin Weber

free
Thumbnail for: Never Mind the Devoxx

Never Mind the Devoxx

David Blevins

free
Thumbnail for: Building the UKs biggest IoT network

Building the UKs biggest IoT network

Romanas Sonkinas

free
Thumbnail for: The First IoT JSR: Units of Measurement

The First IoT JSR: Units of Measurement

Leonardo Lima , Chris Senior

free
Thumbnail for: Devoxx4Kids

Devoxx4Kids

Dan Hardiker

free
Thumbnail for: Ceylon from here to infinity: the big picture and what's coming

Ceylon from here to infinity: the big picture and what's coming

Stephane Epardaud

free
Thumbnail for: Predicting the Future with Machine Learning

Predicting the Future with Machine Learning

Amy Nicholson

free
Thumbnail for: Microservices Made Easy with Spring Cloud and Netflix OSS

Microservices Made Easy with Spring Cloud and Netflix OSS

David Syer

free
Thumbnail for: WildFly 9

WildFly 9

Kabir Khan

free
Thumbnail for: CDI 2.0: what is in the work?

CDI 2.0: what is in the work?

Antoine Sabot-Durand , José Paumard

free
Thumbnail for: Diversity Rules!

Diversity Rules!

Amali de Alwis

free
Thumbnail for: Top 10 Real-life WebSocket Use Cases and Experiences

Top 10 Real-life WebSocket Use Cases and Experiences

Richard Cullen

free
Thumbnail for: Microservices Bootcamp

Microservices Bootcamp

Josh Long

free
Thumbnail for: Flyway - Database Migration made easy

Flyway - Database Migration made easy

Axel Fontaine

free
Thumbnail for: How to Rock your Web Apps with Spring and Vaadin

How to Rock your Web Apps with Spring and Vaadin

Sami Ekblad

free
Thumbnail for: Software Architecture as Code

Software Architecture as Code

Simon Brown

free
Thumbnail for: Combining R with Java for Data Analysis

Combining R with Java for Data Analysis

Ryan Cuprak , Elsa Cuprak

free
Thumbnail for: Let’s Get to the Rapids: Java 8 Stream Perfomance

Let’s Get to the Rapids: Java 8 Stream Perfomance

Maurice Naftalin

free
Thumbnail for: Level Up your Dev Skills with Static Analysis

Level Up your Dev Skills with Static Analysis

David Lindsay

free
Thumbnail for: Akka Streams with Scala and Java

Akka Streams with Scala and Java

Jamie Allen

free
Thumbnail for: Functional patterns for scala beginners

Functional patterns for scala beginners

Clément Delafargue

free
Thumbnail for: The 10 Golden Rules of Mobile UX

The 10 Golden Rules of Mobile UX

Emilia Ciardi

free
Thumbnail for: HTTP/2 comes to Java. What Servlet 4.0 means to You

HTTP/2 comes to Java. What Servlet 4.0 means to You

David Delabassee

free
Thumbnail for: Is your profiler speaking the same language as you?

Is your profiler speaking the same language as you?

Simon Maple

free
Thumbnail for: Programming at any Scale

Programming at any Scale

Andrew Harmel-Law

free
Thumbnail for: Building Cloud Powered Android Apps with Azure

Building Cloud Powered Android Apps with Azure

Chris Risner

free
Thumbnail for: 5 reasons why developers should pay attention to robotics

5 reasons why developers should pay attention to robotics

Nicolas Rigaud

free
Thumbnail for: From 0 to 60 million users: Scaling for speed and high availability

From 0 to 60 million users: Scaling for speed and high availability

Aviran Mordo

free
Thumbnail for: In-Memory Computing - Distributed Systems

In-Memory Computing - Distributed Systems

Christoph Engelbert

free
Thumbnail for: Android Testing: A New Hope

Android Testing: A New Hope

Zan Markan , Nicholas Jackson

free
Thumbnail for: Java EE changes design pattern implementation

Java EE changes design pattern implementation

Alex Theedom

free
Thumbnail for: Making Enterprise Java Architecture Sustainable

Making Enterprise Java Architecture Sustainable

Markus Eisele

free
Thumbnail for: Ludicrously Fast Builds with Buck

Ludicrously Fast Builds with Buck

Simon Stewart

free
Thumbnail for: Java is dead, long live Ceylon, Kotlin,…

Java is dead, long live Ceylon, Kotlin,…

Russel Winder

free
Thumbnail for: Java 9: Make Way for Modules!

Java 9: Make Way for Modules!

Mark Reinhold

free
Thumbnail for: Comparing different concurrency models on the JVM

Comparing different concurrency models on the JVM

Mario Fusco

free
Thumbnail for: 50 minutes to develop a full Java EE application with Forge? Is that all?

50 minutes to develop a full Java EE application with Forge? Is that all?

Antonio Goncalves

free
Thumbnail for: Making Events for Local Dev Communities

Making Events for Local Dev Communities

Celestino Bellone , Federico Yankelevich

free
Thumbnail for: Refactor your Java EE application using Microservices and Containers

Refactor your Java EE application using Microservices and Containers

Arun Gupta

free
Thumbnail for: Welcome Keynote

Welcome Keynote

Mark Hazell

free
Thumbnail for: Developing iOS applications with Java and Eclipse

Developing iOS applications with Java and Eclipse

Grant Ronald

free
Thumbnail for: Java EE 8, a snapshot overview

Java EE 8, a snapshot overview

David Delabassee

free
Thumbnail for: Finally, Security API JSR 375

Finally, Security API JSR 375

Alex Kosowski

free
Thumbnail for: Decoding the air around you with Java and $7 hardware

Decoding the air around you with Java and $7 hardware

Bert Jan Schrijver

free
Thumbnail for: The Dark arts of building your own framework

The Dark arts of building your own framework

Andrey Glaschenko , Konstantin Krivopustov

free
Thumbnail for: Practical Continuous Deployment

Practical Continuous Deployment

Steve Smith

free
Thumbnail for: The Seven Deadly Sins of Microservices

The Seven Deadly Sins of Microservices

Daniel Bryant

free
Thumbnail for: Nuts and Bolts of WebSocket

Nuts and Bolts of WebSocket

Arun Gupta

free
Thumbnail for: Level up your Android Build

Level up your Android Build

Volker Leck

free
Thumbnail for: Powering real-time web apps with Hazelcast

Powering real-time web apps with Hazelcast

Andrejs Jermakovics

free
Thumbnail for: What is your build telling you about your application structure?

What is your build telling you about your application structure?

Abraham Marin-Perez

free
Thumbnail for: Practical Challenges of moving from CI to CD using Maven

Practical Challenges of moving from CI to CD using Maven

Jatin Bhadra

free
Thumbnail for: Design Patterns in the 21st Century

Design Patterns in the 21st Century

Samir Talwar

free
Thumbnail for: All Change! How the new economics of Cloud will make you think differently about Java

All Change! How the new economics of Cloud will make you think differently about Java

Steve Poole

free
Thumbnail for: Destination: Cloud. Deploying Applications To The Cloud With Docker

Destination: Cloud. Deploying Applications To The Cloud With Docker

Ryan Baxter

free
Thumbnail for: Not my department?! How our privacy is broken and what you can do about it.

Not my department?! How our privacy is broken and what you can do about it.

Anna Biselli

free
Thumbnail for: goto java;

goto java;

free
Thumbnail for: The Hidden Gems of PDF

The Hidden Gems of PDF

Michaël Demey

free
Thumbnail for: Accessibility and how to get the most from your screenreader

Accessibility and how to get the most from your screenreader

Edd Sowden

free
Thumbnail for: Building securely with agile

Building securely with agile

Michael Brunton-spall

free
Thumbnail for: STOP BREAKING MY STUFF

STOP BREAKING MY STUFF

Katharine Fitzpatrick

free
Thumbnail for: Java Generics: Past, Present and Future

Java Generics: Past, Present and Future

Richard Warburton , Raoul-Gabriel Urma

free
Thumbnail for: Keynote: The Extraordinary Team of Developers

Keynote: The Extraordinary Team of Developers

Trisha Gee , Daniel Bryant

free
Thumbnail for: Java 8 in Anger

Java 8 in Anger

Trisha Gee

free
Thumbnail for: Miniboxing: Fast Generics for Primitive Types

Miniboxing: Fast Generics for Primitive Types

Vlad Ureche

free
Thumbnail for: Bringing IBM Watson to the Cloud

Bringing IBM Watson to the Cloud

Dale Lane

free
Thumbnail for: The end of server management : hosting have to become a commodity

The end of server management : hosting have to become a commodity

Quentin ADAM

free
Thumbnail for: 3 Keys to Rapid Deployment Success

3 Keys to Rapid Deployment Success

Sven Erik Knop

free
Thumbnail for: Experimenting with ServiceWorker

Experimenting with ServiceWorker

Sandro Paganotti

free
Thumbnail for: "Catch me if you can" - Java on wearables

"Catch me if you can" - Java on wearables

Gerrit Grunwald

free
Thumbnail for: The Google Cloud Plaform - Beyond simple use cases

The Google Cloud Plaform - Beyond simple use cases

David Gageot

free
Thumbnail for: The Smartwatch Revolution begins: Developing for Android Wear

The Smartwatch Revolution begins: Developing for Android Wear

Pratik Patel

free
Thumbnail for: SQL’s back: querying document databases the old fashioned way

SQL’s back: querying document databases the old fashioned way

Matthew Revell

free
Thumbnail for: JCP, Adopt-a-JSR & You

JCP, Adopt-a-JSR & You

Heather VanCura

free
Thumbnail for: Pushing The Limits With Java Enterprise Cloud Development

Pushing The Limits With Java Enterprise Cloud Development

Simon Ritter

free
Thumbnail for: Performance Tuning, Top 10 Your Doing it Wrong!

Performance Tuning, Top 10 Your Doing it Wrong!

Kirk Pepperdine

free
Thumbnail for: What Were You Doing In 1995? A 20 Year Retrospective of Java

What Were You Doing In 1995? A 20 Year Retrospective of Java

Simon Ritter , Steve Elliott

free
Thumbnail for: The Cloud, an Arduino, an Application, Server, and me - Adventures In and Out of the Cloud

The Cloud, an Arduino, an Application, Server, and me - Adventures In and Out of the Cloud

Holly Cummins

free
Thumbnail for: TestOps - Chasing the White Whale

TestOps - Chasing the White Whale

Ioana Serban

free
Thumbnail for: Let’s Get to the Rapids: Java 8 Stream Perfomance

Let’s Get to the Rapids: Java 8 Stream Perfomance

Maurice Naftalin

free
Thumbnail for: The Future of Personal Robotics

The Future of Personal Robotics

Nicolas Rigaud

free
Thumbnail for: How to lower the power consumption of your app, without affecting performance

How to lower the power consumption of your app, without affecting performance

Rick Schwartz

free
Thumbnail for: Gimme Caching - The Distributed JCache(JSR107) Way

Gimme Caching - The Distributed JCache(JSR107) Way

David Brimley

free
Thumbnail for: Web Application Security Reloaded for the HTML5 era

Web Application Security Reloaded for the HTML5 era

Carlo Bonamico

free
Thumbnail for: NOW TV and Linear Streaming: The unpredictable scalability challenge

NOW TV and Linear Streaming: The unpredictable scalability challenge

Tom Maule

free
Thumbnail for: Never mind the bollocks: here's the Linux containers

Never mind the bollocks: here's the Linux containers

Patrick Chanezon

free