HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

107
Photos by Trish McGinity - http://mcginityphoto.com HTML5 w/ Play Scala, CoffeeScript and Jade Matt Raible [email protected] @mraible

description

HTML5 Development with Play Scala, CoffeeScript and Jade Presentation from Devoxx 2011. Discusses these technologies, as well as my story of using them to develop an HTML5 Fitness Tracking application. http://www.devoxx.com/display/DV11/HTML5+with+Play+Scala%2C+CoffeeScript+and+Jade

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

Page 2: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

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?

2

Page 3: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

MattRaible

Page 4: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Page 5: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Page 6: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Page 7: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Page 8: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Page 9: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Page 10: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Page 11: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Page 12: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Agenda

12

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

Page 13: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Why am I doing this talk?

13

Page 14: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Why am I doing this talk?

14

Page 15: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Why am I doing this talk?

15

Page 16: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Why am I doing this talk?

16

‣ I like a Challenge to...- Learn Scala

- Via Play!

- And Jade is cool too!

- So is CoffeeScript!

Page 17: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Why am I doing this talk?

17

‣ Honestly, it’s because of James Strachan...

Page 18: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Why am I doing this talk?

18

‣ Who likes beer too!

Page 19: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Why am I doing this talk?

19

Page 20: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

What are these technologies?

20

Page 21: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

HTML5

21http://on.wsj.com/tEGIJL

Page 22: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

How do you write HTML5?

<!DOCTYPE html>

22

<article> <aside> <section><header> <footer> <nav><audio> <canvas> <video><datalist> <details>

http://www.w3schools.com/html5/html5_reference.asp

<applet> <center> <font><frame> <frameset>

Page 23: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

CSS3

‣ Animated Transitions‣ Rounded Corners‣ Drop Shadows‣ Gradient Colors‣ Styling based on sibling count‣ More cursors for better usability‣ Custom Checkboxes and Radio Buttons

23

http://lea.verou.me/css3-secrets

transform: rotateY(180deg);

border-radius: 8px 8px 0 0;

box-shadow: 2px 2px 4px 4px;

Page 24: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

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

24

Page 25: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Matrix Results

0

4.5

9

13.5

18Gr

ails

Sprin

gRa

ilsGW

TVa

adin

Wick

etTa

pestr

ySt

ruts

2St

ripes Play

Flex

JSF Lift

11.513.513.5141414.5151515.5

17171717.5

25

Page 26: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Weighted Results

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

26

Page 27: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Mailing List Traffic

Wicket

GWT

Grails

Rails

Tapestry

Play

0 475 950 1425 1900

1451

1538

1604

1635

1753

1841

July 2011* Spring MVC and Vaadin use Forums, which don’t provide this data.

27

Page 28: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Play Scala

28

But really, it’s more like this

Page 29: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Play Scala

29

Page 30: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

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

30

Page 31: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Scala Basics‣ def starts a method

‣ variables are started with var or val‣ variables are defined with name:type ‣ semicolons are not required

31

Page 32: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Scala vs. Java

32

Page 33: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Play with Scala

33

Page 34: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 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

34

Page 35: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

CoffeeScript

35

Page 36: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

JavaScript: The Good Parts

36

Page 37: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Jade

37

Page 38: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Jade Example

38

Page 39: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

CoffeeBar

39

Page 40: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

My Development Experience

40

Page 41: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Getting Started

41

Page 42: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Developing with Play Scala

42

Page 43: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Tools I started with...

43

Page 44: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Scalate Module

44

Page 45: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Scalate Integration Solution

45

Page 46: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Integrating Scalate with Play

46

play deps --sync

Page 47: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Integrating Scalate with Play

47

Page 48: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Integrating Scalate with Play

48

Page 49: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

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)

Page 50: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Integrating Scalate with Play

50

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

Page 51: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Play 2.0

51

Page 52: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Play 2.0

52

Page 53: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Play 2.0 Beta

53

Page 55: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

CoffeeScript with Play

55

Page 56: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

CoffeeScript with Play

56

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

Page 57: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

My Development Experience

57

Page 58: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Page 59: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

H5BP and Play

59

cd $boilerplate-downloadcp 404.html ~/dev/play-more/app/views/errors/404.htmlcp *.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/.

Page 60: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Scalate Layouts

60

Page 61: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

HTML5 Boilerplate

61

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

Page 62: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

HTML5 Development

62

Page 63: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

StopWatch with Coffee

63

Page 64: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Jade Template for Watch

64

Page 65: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

HTML5 Development

65

Page 66: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

HTML5 Geo API

66

Page 67: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Google Maps JS API

67

Page 68: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Jade View for Map

68

Page 69: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

HTML5 Development

69

Page 70: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Odometer

70

Page 71: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Testing

71

‣ 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

Page 72: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Discovered

72

‣ HTML5 Geolocation was highly inaccurate- Fixed by passing {enableHighAccuracy: true} to

navigator.geolocation.watchPosition()

Page 73: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Discovered

73

Page 74: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Show Stopper?

74

‣ Geolocation doesn’t run in the background

Page 75: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Making it look good

75

Page 76: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Twitter’s Bootstrap

76

Page 77: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Bootstrap

77

Page 78: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

LESS

78

Page 79: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

LESS

79

Page 80: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

CSS3 Media Queries

80

Page 81: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

HTML5 Features

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

81

Page 82: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

HTML5 and Bootstrap

82

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

Page 83: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Anorm and PostgreSQL

83

‣ 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

Page 84: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Data Model

84

Page 85: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

ScalaTest

85

Page 86: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Anorm in Action

86

Page 87: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Controller and View

87

Page 88: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Anorm, Dates & PostgreSQL

88

Page 89: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

‣ 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

Anorm, Dates & PostgreSQL

89

Page 90: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Anorm and PostgreSQL

90

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

Page 91: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

More Scalate Goodness

91

Page 92: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

More Scalate Goodness

92

Page 93: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

More Scalate Goodness

93

Page 94: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Scalate as a Play Module

94

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

Page 95: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

App was still unusable‣ I still hadn’t solved the fundamental problem‣ The app couldn’t run in the background on a

mobile phone

95

Page 96: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

PhoneGap to the Rescue!

96

Page 97: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Requirements

97

‣ Intel-based computer with Mac OS X Snow Leopard (10.6)

‣ Xcode‣ PhoneGap‣ Necessary for Installation:

- An Apple iOS Device

- iOS Developer Certification

Page 98: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Icons and Splash Screen

98

Page 99: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Background Modes

99

Page 100: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Success!

100

Page 101: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

PhoneGap Writeup

101

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

Page 102: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 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

102

Page 103: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Developing Play More103

http://www.youtube.com/watch?v=bBqtPPfM2xQ

Page 104: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Tools

104

Page 105: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

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

105

Page 106: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Questions?

Contact- http://raibledesigns.com

- http://twitter.com/mraible

Download- http://slideshare.net/mraible

106

Page 107: HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011

© 2011 Raible Designs

Play More!‣ Learn Something New‣ Have Fun‣ Get out there and Play!

107