SlideShare a Scribd company logo

HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012

HTML5 Development with Play Scala, CoffeeScript and Jade Presentation from Jfokus 2012. Discusses these technologies, as well as my story of using them to develop an HTML5 Fitness Tracking application. Read more about this presentation at: http://raibledesigns.com/rd/entry/comparing_web_frameworks_and_html5

1 of 111
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 am I doing this talk?




      http://www.flickr.com/photos/question_everything/2931013045/

                            © 2012 Raible Designs                   6
Ad

Recommended

HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011
HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011
HTML5 with Play Scala, CoffeeScript and Jade - Devoxx 2011Matt Raible
 
HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012
HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012
HTML5 with Play Scala, CoffeeScript and Jade - UberConf 2012Matt Raible
 
Comparing JVM Web Frameworks - Jfokus 2012
Comparing JVM Web Frameworks - Jfokus 2012Comparing JVM Web Frameworks - Jfokus 2012
Comparing JVM Web Frameworks - Jfokus 2012Matt Raible
 
Landforms 60 - PowerPoint - Version 2
Landforms 60 - PowerPoint - Version 2Landforms 60 - PowerPoint - Version 2
Landforms 60 - PowerPoint - Version 2Yaryalitsa
 
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
 
Comparing JVM Web Frameworks - 33rd Degree
Comparing JVM Web Frameworks - 33rd DegreeComparing JVM Web Frameworks - 33rd Degree
Comparing JVM Web Frameworks - 33rd DegreeMatt 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
 

More Related Content

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

Imo dsc 15_-v1
Imo dsc 15_-v1Imo dsc 15_-v1
Imo dsc 15_-v1dgdhande
 
Spring Data and MongoDB
Spring Data and MongoDBSpring Data and MongoDB
Spring Data and MongoDBOliver Gierke
 
Transformations xmas tree
Transformations   xmas treeTransformations   xmas tree
Transformations xmas treealan brown
 
Hybrid User Forum survey Results
Hybrid User Forum survey ResultsHybrid User Forum survey Results
Hybrid User Forum survey Resultshybriduserforum
 
poly-Si TFTのスパイスモデル
poly-Si TFTのスパイスモデルpoly-Si TFTのスパイスモデル
poly-Si TFTのスパイスモデルTsuyoshi Horigome
 

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

catalog
catalogcatalog
catalog
 
Imo dsc 15_-v1
Imo dsc 15_-v1Imo dsc 15_-v1
Imo dsc 15_-v1
 
Day 6 graphing review
Day 6 graphing reviewDay 6 graphing review
Day 6 graphing review
 
Spring Data and MongoDB
Spring Data and MongoDBSpring Data and MongoDB
Spring Data and MongoDB
 
Transformations xmas tree
Transformations   xmas treeTransformations   xmas tree
Transformations xmas tree
 
Hybrid User Forum survey Results
Hybrid User Forum survey ResultsHybrid User Forum survey Results
Hybrid User Forum survey Results
 
poly-Si TFTのスパイスモデル
poly-Si TFTのスパイスモデルpoly-Si TFTのスパイスモデル
poly-Si TFTのスパイスモデル
 

More from Matt 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
 
Security Patterns for Microservice Architectures - SpringOne 2020
Security Patterns for Microservice Architectures - SpringOne 2020Security Patterns for Microservice Architectures - SpringOne 2020
Security Patterns for Microservice Architectures - SpringOne 2020Matt Raible
 

More from Matt Raible (20)

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
 
Security Patterns for Microservice Architectures - SpringOne 2020
Security Patterns for Microservice Architectures - SpringOne 2020Security Patterns for Microservice Architectures - SpringOne 2020
Security Patterns for Microservice Architectures - SpringOne 2020
 

Recently uploaded

The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...DianaGray10
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologySafe Software
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfIsidro Navarro
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Umar Saif
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxVotarikari Shravan
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manualDomotica daVinci
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?MENGSAYLOEM1
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementMimmo Squillace
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellencePrecisely
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringMassimo Talia
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaISPMAIndia
 
Q1 Memory Fabric Forum: Building Fast and Secure Chips with CXL IP
Q1 Memory Fabric Forum: Building Fast and Secure Chips with CXL IPQ1 Memory Fabric Forum: Building Fast and Secure Chips with CXL IP
Q1 Memory Fabric Forum: Building Fast and Secure Chips with CXL IPMemory Fabric Forum
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotelPhilippines
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxMaarten Balliauw
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfDomotica daVinci
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsEvangelia Mitsopoulou
 

Recently uploaded (20)

The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI Technology
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdf
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvement
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center Excellence
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineering
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
 
Q1 Memory Fabric Forum: Building Fast and Secure Chips with CXL IP
Q1 Memory Fabric Forum: Building Fast and Secure Chips with CXL IPQ1 Memory Fabric Forum: Building Fast and Secure Chips with CXL IP
Q1 Memory Fabric Forum: Building Fast and Secure Chips with CXL IP
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company Profile
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptx
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdf
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
 

HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 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 am I doing this talk? http://www.flickr.com/photos/question_everything/2931013045/ © 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? ‣ Who likes beer too! © 2012 Raible Designs 10
  • 11. Why am I doing this talk? © 2012 Raible Designs 11
  • 12. What are these technologies? © 2012 Raible Designs 12
  • 13. HTML5 http://on.wsj.com/tEGIJL © 2012 Raible Designs 13
  • 14. How do you write HTML5? <!DOCTYPE html> <article> <aside> <section> <header> <footer> <nav> <audio> <canvas> <video> <datalist> <details> <applet> <center> <font> <frame> <frameset> http://www.w3schools.com/html5/html5_reference.asp © 2012 Raible Designs 14
  • 15. CSS3 ‣ Animated Transitions transform: rotateY(180deg); ‣ Rounded Corners border-radius: 8px 8px 0 0; ‣ Drop Shadows box-shadow: 2px 2px 4px 4px; ‣ Gradient Colors ‣ Styling based on sibling count ‣ More cursors for better usability ‣ Custom Checkboxes and Radio Buttons http://lea.verou.me/css3-secrets © 2012 Raible Designs 15
  • 16. 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 16
  • 17. Matrix Results 18 17.5 17 17 17 15.5 15 15 13.5 14.5 14 14 13.513.5 11.5 9 4.5 0 ails g ils T din t ry 2 s y x F Lift e Pla ipe Fle JS rin GW est ck uts Ra a Gr Sp Str Va Wi Tap Str © 2012 Raible Designs 17
  • 18. Weighted Results ‣ Grails (90) ‣ Spring MVC (85) ‣ Ruby on Rails (82.5) ‣ Vaadin (82.5) ‣ Play (82.5) ‣ GWT (80) © 2012 Raible Designs 18
  • 19. 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 19
  • 20. Play Scala But really, it’s more like this © 2012 Raible Designs 20
  • 21. Play Scala © 2012 Raible Designs 21
  • 22. 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 22
  • 23. 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 23
  • 24. Scala vs. Java © 2012 Raible Designs 24
  • 25. Play with Scala © 2012 Raible Designs 25
  • 26. Learning Scala ‣ Venkat’s Scala for the Intrigued - PragPub Magazine, starting in Sep 2011 ‣ Scala for the Impatient - Cay Horstmann ‣ Programming in Scala, 2nd Edition - Martin Odersky, Lex Spoon, and Bill Venners ‣ Twitter’s Scala School © 2012 Raible Designs 26
  • 27. CoffeeScript © 2012 Raible Designs 27
  • 28. JavaScript: The Good Parts © 2012 Raible Designs 28
  • 29. Jade © 2012 Raible Designs 29
  • 30. Jade Example © 2012 Raible Designs 30
  • 31. CoffeeBar © 2012 Raible Designs 31
  • 32. My Development Experience © 2012 Raible Designs 32
  • 33. Getting Started © 2012 Raible Designs 33
  • 34. Developing with Play Scala © 2012 Raible Designs 34
  • 35. Tools I started with... © 2012 Raible Designs 35
  • 36. Scalate Module © 2012 Raible Designs 36
  • 37. Scalate Integration Solution © 2012 Raible Designs 37
  • 38. Integrating Scalate with Play play deps --sync © 2012 Raible Designs 38
  • 39. Integrating Scalate with Play © 2012 Raible Designs 39
  • 40. Integrating Scalate with Play © 2012 Raible Designs 40
  • 41. 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
  • 42. Integrating Scalate with Play http://raibledesigns.com/rd/entry/integrating_scalate_and_jade_with © 2012 Raible Designs 42
  • 43. Play 2.0 © 2012 Raible Designs 43
  • 44. Play 2.0 © 2012 Raible Designs 44
  • 45. Play 2.0 © 2012 Raible Designs 45
  • 46. Play 2.0 Beta http://raibledesigns.com/rd/entry/play_2_0_a_web © 2012 Raible Designs 46
  • 47. A Nice Break ... © 2012 Raible Designs 47
  • 48. CoffeeScript with Play © 2012 Raible Designs 48
  • 49. CoffeeScript with Play http://raibledesigns.com/rd/entry/trying_to_make_coffeescript_work © 2012 Raible Designs 49
  • 50. My Development Experience © 2012 Raible Designs 50
  • 51. © 2012 Raible Designs
  • 52. H5BP and Play cd $boilerplate-download cp 404.html ~/dev/play-more/app/views/errors/404.html cp *.png ~/dev/play-more/public/. cp crossdomain.xml ~/dev/play-more/public/. cp -r css ~/dev/play-more/public/stylesheets/. cp favicon.ico ~/dev/play-more/public/. cp humans.txt ~/dev/play-more/public/. cp -r js/libs ~/dev/play-more/public/javascripts/. cp robots.txt ~/dev/play-more/public/. © 2012 Raible Designs 52
  • 53. Scalate Layouts © 2012 Raible Designs 53
  • 54. HTML5 Boilerplate http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate © 2012 Raible Designs 54
  • 55. HTML5 Development © 2012 Raible Designs 55
  • 56. StopWatch with Coffee © 2012 Raible Designs 56
  • 57. Jade Template for Watch © 2012 Raible Designs 57
  • 58. HTML5 Development © 2012 Raible Designs 58
  • 59. HTML5 Geo API © 2012 Raible Designs 59
  • 60. Google Maps JS API © 2012 Raible Designs 60
  • 61. Jade View for Map © 2012 Raible Designs 61
  • 62. HTML5 Development © 2012 Raible Designs 62
  • 63. Odometer © 2012 Raible Designs 63
  • 64. Testing ‣ Tried Trip Meter on a bike ride ‣ Said I’d traveled 5 km, when I knew I’d gone 10 - Was calculating start to end w/o waypoints ‣ To Visualize: integrated odometer with maps using Google Maps Polylines © 2012 Raible Designs 64
  • 65. Discovered ‣ HTML5 Geolocation was highly inaccurate - Fixed by passing {enableHighAccuracy: true} to navigator.geolocation.watchPosition() © 2012 Raible Designs 65
  • 66. Discovered © 2012 Raible Designs 66
  • 67. Show Stopper? ‣ Geolocation doesn’t run in the background © 2012 Raible Designs 67
  • 68. Making it look good © 2012 Raible Designs 68
  • 69. Twitter’s Bootstrap © 2012 Raible Designs 69
  • 70. Bootstrap © 2012 Raible Designs 70
  • 71. LESS © 2012 Raible Designs 71
  • 72. LESS © 2012 Raible Designs 72
  • 73. CSS3 Media Queries © 2012 Raible Designs 73
  • 74. HTML5 Features ‣ Geolocation ‣ CSS 3 ‣ Audio ‣ History ‣ Local Storage ‣ Canvas © 2012 Raible Designs 74
  • 75. HTML5 and Bootstrap http://raibledesigns.com/rd/entry/developing_with_html5_coffeescript_and © 2012 Raible Designs 75
  • 76. Anorm and PostgreSQL ‣ I’m a big fan of ORMs like Hibernate and JPA - Learn a new JDBC abstraction? Really!? ‣ Anorm is and will be the default for Play Scala ‣ Chose PostgreSQL since that’s what Heroku uses © 2012 Raible Designs 76
  • 77. Data Model © 2012 Raible Designs 77
  • 78. ScalaTest © 2012 Raible Designs 78
  • 79. Anorm in Action © 2012 Raible Designs 79
  • 80. Controller and View © 2012 Raible Designs 80
  • 81. Anorm, Dates & PostgreSQL © 2012 Raible Designs 81
  • 82. 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 82
  • 83. Anorm and PostgreSQL http://raibledesigns.com/rd/entry/play_scala_s_anorm_heroku © 2012 Raible Designs 83
  • 84. More Scalate Goodness © 2012 Raible Designs 84
  • 85. More Scalate Goodness © 2012 Raible Designs 85
  • 86. More Scalate Goodness © 2012 Raible Designs 86
  • 87. Scalate as a Play Module http://raibledesigns.com/rd/entry/more_scalate_goodness_for_play © 2012 Raible Designs 87
  • 88. 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 88
  • 89. PhoneGap to the Rescue! © 2012 Raible Designs 89
  • 90. 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 90
  • 91. Icons and Splash Screen © 2012 Raible Designs 91
  • 92. Background Modes © 2012 Raible Designs 92
  • 93. Success! © 2012 Raible Designs 93
  • 94. PhoneGap Writeup http://raibledesigns.com/rd/entry/phonegap_to_the_rescue © 2012 Raible Designs 94
  • 95. 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 95
  • 96. 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 96
  • 97. 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 97
  • 98. Upgrading to Play 2.0 © 2012 Raible Designs 98
  • 99. 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 99
  • 100. JSON Services © 2012 Raible Designs 100
  • 101. API Tests © 2012 Raible Designs 101
  • 102. Secure Social © 2012 Raible Designs 102
  • 103. Secure Social © 2012 Raible Designs 103
  • 104. Secure Social http://raibledesigns.com/rd/entry/secure_json_services_with_play © 2012 Raible Designs 104
  • 105. Developing Play More http://vimeo.com/36826202 © 2012 Raible Designs 105
  • 106. Tools © 2012 Raible Designs 106
  • 107. 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 107
  • 108. Or, What Rich Said... © 2012 Raible Designs 108
  • 109. HTML5 vs. Native ‣ If you need background services like geolocation or audio, native is necessary ‣ Can still write your apps in HTML5 - Bridge the Gap with PhoneGap or Titanium ‣ If mobile is important, consider fully native with WebViews for common features - a.k.a. Hybrid © 2012 Raible Designs 109
  • 110. Questions? Contact - http://raibledesigns.com - @mraible Download - http://slideshare.net/mraible © 2012 Raible Designs 110
  • 111. Play More! ‣ Learn Something New ‣ Have Fun ‣ Get out there and Play! © 2012 Raible Designs 111