Vaadin — web apps made easy

Vaadin — web apps made easy

Vaadin: web apps made easy

Build web apps, without the web hassles, using this open-source framework.

Can a person develop professional-looking, business-oriented, desktop-style, interactive ‘single-page’ web apps without mastering the alphabet soup of HTTP, HTML, CSS, JavaScript, DOM, AJAX, Comet, XML, JSON, WebSocket, and Push? Yes!

[*Vaadin Framework*](https://vaadin.com/framework) is the high-quality open-source free-of-cost framework for building a web app user interface using only Java on the backend. You layout a form with buttons, fields, labels, and other widgets either programmatically or by using a visual drag-and-drop form editor.

Run in a Java Servlet container such as the open-source *Apache Tomcat* or *Eclipse Jetty*. Vaadin automagically renders that app in the user’s browser using web-standard technologies. Vaadin generates and delivers the HTML, CSS, and JavaScript on your behalf to any common web browser (desktop or mobile).

You get a rich, flexible, and fast user-interface instantly deployed to most any browser client-side while enjoying the speed, security, reliability, and vast libraries of Java on the server-side.

Over a decade-old, Vaadin is mature and proven, used by over 150,000 programmers world-wide, and is rapidly growing in popularity.

Leave this talk inspired to build web apps in a totally different way, quickly and more easily than you thought possible, enjoying the reliability of Java and the vast world of powerful Java libraries while deploying to common web browsers.

Df06000516b540a9d7d58309f9ad1a18?s=128

Basil Bourque

April 27, 2018
Tweet

Transcript

  1. Vaadin web apps made easy Build web apps, without the

    web hassles 1 Can a person develop professional-looking, business-oriented, desktop-style, interactive ‘single-page’ web apps without mastering the alphabet soup of HTTP, HTML, CSS, JavaScript, DOM, AJAX, Comet, XML, JSON, WebSocket, and Push? Yes! 2018-04-27 Basil Bourque LinkedIn: basilbourque
  2. me • Basil Bourque • LinkedIn: basilbourque • Decades as

    Software Developer • Building custom-crafted database-backed client-server apps (4D) • Shipped iOS apps (Objective-C) • Micro-startups (Java, Vaadin, Postgres) • Got an idea? Talk to me. 2 SeaPUG
  3. prerequisites • Basics of Java & object-oriented programming (OOP) •

    Idea of dynamic web sites (web apps) 3
  4. agenda • What is Vaadin technology? • Architecture • How

    it works (not magic) • Starter app • Modify, add a feature 4 technical orientation sales pitch
  5. caveat • Vaadin 8 (a.k.a. Vaadin Framework) (thru 2022 at

    least) • Vaadin 10 (a.k.a. Vaadin Flow) (new, beta) 5
  6. 6

  7. widgets galore 7 Valo demo

  8. 8 The productive UI framework for Java web apps •

    Community • Open-source
 (Apache) • Free-of-cost Web-only, or… Web + Java backend • Vaadin, Ltd. • Commercial support, training, & add-ons • Very actively developed, and supported
  9. 9 app lives on server ( state + logic )

    ( db, services ) ( resources, security ) UI auto rendered in browser
  10. 10 HTTP HTML CSS JavaScript DOM AJAX Comet Push WebSocket

    XML JSON
  11. 11 HTTP HTML CSS JavaScript DOM AJAX Comet Push WebSocket

    XML JSON Java-free-zone no applets
  12. 12 HTTP HTML CSS JavaScript DOM AJAX Comet Push WebSocket

    XML JSON new Label() new TextField() new Button()
  13. 13 HTTP HTML CSS JavaScript DOM AJAX Comet Push WebSocket

    XML JSON new Label() new TextField() new Button() Vaadin protocol widgets events
  14. 14 HTTP HTML CSS JavaScript DOM AJAX Comet Push WebSocket

    XML JSON new Label() new TextField() new Button() Vaadin protocol widgets events
  15. starter app 15

  16. starter app 16 caption TextField Button

  17. creating the starter app • IDE • Maven-driven ( IntelliJ,

    NetBeans, Eclipse ) • formerly plugin-driven • new project • Maven archetype, by Vaadin Ltd. 17 • Tips for beginners in 2018 • Stick with Vaadin 8 • Vaadin 10 is beta • Stick with Java 8 • Java 9/10/11 modularization is problematic, in many ways
  18. choose Maven archetype 18

  19. Group = package, Artifact = WAR file 19 Java package

    WAR file
  20. Maven summary 20

  21. IDE project folder 21

  22. Maven clean & install 22 Before first run, do a

    clean & install Wait patiently. May take a few minutes to download libraries
  23. run 23 • Need a Java Servlet container • Ex:

    Tomcat, Jetty, Glassfish/Payara, WildFly/JBoss, WebSphere, etc. • Jetty bundled • Good for beginner • Eventually configure external container
  24. point your browser • URL
 http://localhost:8080 • ‘localhost’ = loopback

    to same machine = 127.0.0.1 • ‘8080’ = port number • Ports below 1024 are protected on Unix-like OSes • macOS, BSD, Linux, etc. • Use ‘80’ in production (port-forwarding, etc.) 24
  25. voilà 25

  26. in action 26

  27. in action 27 caption TextField Button Label

  28. starter-app code 28

  29. zoom in — our code 29 connect our content back

    to `UI` object (viewport)
  30. zoom out — Vaadin/Servlet code 30

  31. classes 31 javax.servlet.Servlet javax.servlet.http.HttpServlet com.vaadin.server.VaadinServlet MyUIServlet com.vaadin.ui.UI MyUI com.vaadin.ui.VerticalLayout widgets

    (button, label) plumbing user-interface
  32. zoom out — Vaadin/Servlet code 32

  33. refactor 33 javax.servlet.Servlet javax.servlet.http.HttpServlet com.vaadin.server.VaadinServlet MyUIServlet com.vaadin.ui.UI MyUI com.vaadin.ui.VerticalLayout widgets

    (button, label) plumbing user-interface TimepieceLayout
  34. refactored code – TimepieceLayout.java 34

  35. refactored code – MyUI.java 35

  36. Vaadin display 36 Browser window/tab Layout Layout Layout UI

  37. classes 37 com.vaadin.ui.UI MyUI com.vaadin.ui.VerticalLayout widgets (button, label) TimepieceLayout

  38. add feature • Use one `Label` object, rather than adding

    • Record time when clicked • Calculate elapsed time 38
  39. elapsed time 39

  40. elapsed-time code 40 state widgets, instance vars configure widgets behavior

    arrange widgets in layouts
  41. Session Vaadin user session 41 window/tab U Layout Layout Layout

    window/tab U Layout Layout Layout window/tab U Layout Layout Layout VaadinSession attributes KEY STRING VALUE OBJECT "user_login" credentials Servlet session
  42. “servlet context” Vaadin web app 42 Session window/tab U Layou

    t Layout Layout window/tab U Layou t Layout Layout window/tab U Layou t Layout Layout Session window/tab U Layou t Layout Layout window/tab U Layou t Layout Layout window/tab U Layou t Layout Layout Session window/tab U Layou t Layout Layout window/tab U Layou t Layout Layout window/tab U Layou t Layout Layout javax.servlet.ServletContext attributes KEY `String` VALUE `object` "EventBus" eventBus
  43. competitors • Xojo, Web Edition 43 server-side app execution &

    state auto-render Web-based UI client-side transparent to app-developer
  44. for sale by Vaadin Ltd. • TestBench • Harness Selenium

    for regression testing of user-interface • Designer • Visual drag-and-drop editor for designing layouts 44 • Charts • Wraps HighCharts library • SpreadSheet • Full spreadsheet functionality (distinct from Vaadin Grid) • Board • “Responsive” layouting, re- arranged by screen size
  45. back to the future • Vaadin 8 versus Vaadin 10


    Framework versus Flow • WebComponents.org • Flex-Box CSS (The Complete Guide) • DOM manipulation via server-side Java • Lumo theme (vs Valo vs Reindeer) 45 • Transition • GWT – Google Web Toolkit • Web Components (Polymer)
  46. resources • Vaadin.com • manual / tutorial • demo: Vaadin

    10 (Flow) • demos: Vaadin 8 (Framework) • JavaDoc • forums • Widget encyclopedias • Vaadin 10 (not yet) • Valo theme (Vaadin 8) • Reindeer theme (Vaadin 7) 46 • YouTube.com • “VaadinOfficial” • StackOverflow.com • Wikipedia • Java Servlet • CSS • Hire me! • demo • training • programming
  47. Vaadin stack 47 widgets layouts & themes data model &

    binding comm protocol browser 㲗 server Java Servlet technology Servlet container ( Tomcat, Jetty, etc. ) data-entry validation business logic services & persistence database Basil Bourque LinkedIn: basilbourque Java secure client web apps w/o web hassles