Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Basil Bourque

April 27, 2018
Tweet

More Decks by Basil Bourque

Other Decks in Programming

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. agenda • What is Vaadin technology? • Architecture • How

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

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

  6. 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
  7. 9 app lives on server ( state + logic )

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

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

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

    XML JSON new Label() new TextField() new Button() Vaadin protocol widgets events
  11. 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
  12. Maven clean & install 22 Before first run, do a

    clean & install Wait patiently. May take a few minutes to download libraries
  13. 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
  14. 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
  15. add feature • Use one `Label` object, rather than adding

    • Record time when clicked • Calculate elapsed time 38
  16. 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
  17. “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
  18. competitors • Xojo, Web Edition 43 server-side app execution &

    state auto-render Web-based UI client-side transparent to app-developer
  19. 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
  20. 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)
  21. 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
  22. 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