Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

prerequisites • Basics of Java & object-oriented programming (OOP) • Idea of dynamic web sites (web apps) 3

Slide 4

Slide 4 text

agenda • What is Vaadin technology? • Architecture • How it works (not magic) • Starter app • Modify, add a feature 4 technical orientation sales pitch

Slide 5

Slide 5 text

caveat • Vaadin 8 (a.k.a. Vaadin Framework) (thru 2022 at least) • Vaadin 10 (a.k.a. Vaadin Flow) (new, beta) 5

Slide 6

Slide 6 text

6

Slide 7

Slide 7 text

widgets galore 7 Valo demo

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 app lives on server ( state + logic ) ( db, services ) ( resources, security ) UI auto rendered in browser

Slide 10

Slide 10 text

10 HTTP HTML CSS JavaScript DOM AJAX Comet Push WebSocket XML JSON

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

starter app 15

Slide 16

Slide 16 text

starter app 16 caption TextField Button

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

choose Maven archetype 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Maven summary 20

Slide 21

Slide 21 text

IDE project folder 21

Slide 22

Slide 22 text

Maven clean & install 22 Before first run, do a clean & install Wait patiently. May take a few minutes to download libraries

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

voilà 25

Slide 26

Slide 26 text

in action 26

Slide 27

Slide 27 text

in action 27 caption TextField Button Label

Slide 28

Slide 28 text

starter-app code 28

Slide 29

Slide 29 text

zoom in — our code 29 connect our content back to `UI` object (viewport)

Slide 30

Slide 30 text

zoom out — Vaadin/Servlet code 30

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

zoom out — Vaadin/Servlet code 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

refactored code – TimepieceLayout.java 34

Slide 35

Slide 35 text

refactored code – MyUI.java 35

Slide 36

Slide 36 text

Vaadin display 36 Browser window/tab Layout Layout Layout UI

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

add feature • Use one `Label` object, rather than adding • Record time when clicked • Calculate elapsed time 38

Slide 39

Slide 39 text

elapsed time 39

Slide 40

Slide 40 text

elapsed-time code 40 state widgets, instance vars configure widgets behavior arrange widgets in layouts

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

“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

Slide 43

Slide 43 text

competitors • Xojo, Web Edition 43 server-side app execution & state auto-render Web-based UI client-side transparent to app-developer

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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)

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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