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.

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
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