Vaadin ♡ Grails 3

80 views

Published on

Intro to Vaadin8 + Grails 3 rapid web app development

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
80
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vaadin ♡ Grails 3

  1. 1. Vaadin 8<3 Grails Vaadin Expert
 Maciej Przepióra
 Vaadin Ltd
 
 GR8Conf.us 2017
  2. 2. Intro to Vaadin new Label(“Hello world”)
  3. 3. What’s hot Getting started QA
  4. 4. Who am I?
  5. 5. Who am I? Member of the Designer Team at Vaadin Molecular biologist turned software developer Husband & Father
  6. 6. User interface framework for rich web applications
  7. 7. User Interface Components
  8. 8. User Interface Components
  9. 9. Developer Productivity Rich UX
  10. 10. htmljava
  11. 11. htmljava
  12. 12. Key Ideas
  13. 13. 123Key Ideas
  14. 14. Rich Components
  15. 15. 1Rich Components
  16. 16. User Interface Data Source Theme
  17. 17. User Interface Data Source Theme
  18. 18. BROWSER SUPPORT
  19. 19. BROWSER SUPPORT
  20. 20. BROWSER SUPPORT iOS
  21. 21. BROWSER SUPPORT iOS
  22. 22. 600+ add-on components
  23. 23. User Interface Data Source Theme
  24. 24. User Interface Data Source Theme
  25. 25. User Interface Data Source Theme
  26. 26. User Interface Data Source Theme
  27. 27. Server + Client
  28. 28. 2Server + Client
  29. 29. Web application layers Backend server Web server Commu- nication JavaScript
  30. 30. Web application layers Backend server Web server Commu- nication JavaScript Client-side UI
  31. 31. Web application layers Backend server Web server Commu- nication JavaScript Server-side UI
  32. 32. Web application layers Backend server Web server Commu- nication JavaScript Server-side UI Automated
  33. 33. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication requiredrequired JS required required
  34. 34. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication required optionalrequired GWT requiredrequired JS requiredrequired required required
  35. 35. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication required optionalrequired GWT requiredrequired JS requiredrequired required required Client-side UI
  36. 36. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required
  37. 37. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required Client-side UI
  38. 38. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required Client-side UIServer-side UI &
  39. 39. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required
  40. 40. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required 1 layer vs 3 layers -50% dev. time -50% maintenance vs full control over DOM and communications
  41. 41. How does server-side UI work?
  42. 42. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total

  43. 43. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total
 307k compress 135k reduced widgetset
  44. 44. • name=”Joonas” • button clicked 261 bytes

  45. 45. • name=”Joonas” • button clicked 261 bytes
 • Add notification 267 bytes

  46. 46. Embracing Java
  47. 47. 3Embracing Java
  48. 48. Any language on JVM
  49. 49. Internet Explorer Chrome Firefox Safari Opera iOS Android
  50. 50. No browser plugins Nothing to install
  51. 51. Servlet Portlet (most) clouds · · · Anything Java
  52. 52. Eclipse IntelliJ IDEA Netbeans Maven / Gradle / Ant · · · Anything Java
  53. 53. Java EE Spring OSGi REST · · · Anything Java
  54. 54. Vaadin 8series
  55. 55. v3 2002 v0.1 2001 Open Source
  56. 56. v4 2006 Ajax v5 2007
  57. 57. 8 2017v7 2013
  58. 58. Complete stack Renewed from Inside
  59. 59. Complete stack Renewed from InsideSass JS HTML5 += GWT RPC State UI Field Push
  60. 60. Vaadin += GWT
  61. 61. Server- Client- side Optim izedfor Productivity Optim izedfor Control
  62. 62. Server- Client- side Optim izedfor Productivit Optim izedfor Control
  63. 63. Architecture
  64. 64. Don’t like GWT? JavaScript Integration
  65. 65. Java ⇄ JavaScript RPC
  66. 66. Java wrapper for existing JavaScript widget
  67. 67. Connector for existing JavaScript widget
  68. 68. WebComponents
  69. 69. Server Push
  70. 70. @Push MyUI <async-supported/> vaadin-push dependency Demo
  71. 71. Responsive
  72. 72. // Vaadin UI protected void init(VaadinRequest request) { new Responsive(this); } // CSS .v-ui[width-range~="0-800px"] { /* Styles that apply when the UI's width is between 0 and 800 pixels */ } .v-ui[width-range~="801px-"] { /* Styles that apply when the UI's width is over 800 pixels */ } http://demo.vaadin.com/responsive/
  73. 73. Don’t like server-side UI?
  74. 74. Polymer & Vaadin Elements (vaadin.com/elements)
  75. 75. getting started
  76. 76. getting started
  77. 77. Eclipse Download plugin from Martketplace
  78. 78. IntelliJ IDEA Built-in support
  79. 79. Netbeans Download plugin Netbeans Plugin Portal
  80. 80. mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.3.0 Maven
  81. 81. Download for Free vaadin.com/book 728 pages 01 -93-1970-1 PDF, ePub, HTML
  82. 82. Apache License
  83. 83. community of 150.000+ developers Ohloh #2 used Java Web Framework
  84. 84. Who is using Vaadin? worldofwebapplications Giants named HTML5 and JVM p.4 · Coffee with R&D: Turning Java into Java p.28 Moleculenix, Rums, SentiOne and many more... https://vaadin.com/who-is-using-vaadin https://vaadin.com/dock
  85. 85. Grails & Vaadin?
  86. 86. No magic, just Spring Boot
  87. 87. web-vaadin8 profile
  88. 88. Gradle plugin for common tasks
  89. 89. So, why does it work?
  90. 90. Spring Boot autoconfiguration
  91. 91. Other options
  92. 92. Other options vaadinongrails.com vaadin-for-grails manual hacking
  93. 93. What’s next?
  94. 94. Quick reload
  95. 95. Security
  96. 96. Declarative UI DSL
  97. 97. … horizontalLayout { button('OK') { clickEvent-> … }, button('cancel') }, …
  98. 98. MVP support, maybe
  99. 99. Community- driven hopefully
  100. 100. vaadin.com/ webinars
  101. 101. vaadin.com/ forum
  102. 102. guides.grails.com
  103. 103. ?

×