Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building web apps with Vaadin 8

1,665 views

Published on

Intro to developing web apps with Vaadin 8. The live coding demo using spring boot can be found here: https://www.youtube.com/watch?v=tnVKN25dIm8

Published in: Software
  • Be the first to comment

Building web apps with Vaadin 8

  1. 1. B U I L D I N G W E B A P P S I N J A V A @ M A R C U S H E L L B E R G 5 S T O R Y A N D P H I L O S O P H Y Software is eating the world and what most of us see of it is the user interface. The user interface has become the key component of how the users experience the business behind it. Competition is lost or won due to user experience. Simplicity is king and the users get frustrated by anything ugly, slow or not working on the device they happen to use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight. Together we want to build a user interface that puts a smile on the user’s face. Vaadin is the technology that empowers developers to build the best web-apps for business purposes. Our priority over everything else is developer productivity because we believe that by simplifying the developer experience and saving the developer’s time, they are best able to focus on building great user interfaces. Our brand is what we want everyone to think about us. When everyone - both us and the people around us - have a consistent understanding of what Vaadin is and what we stand for, it enables that image to spread and amplify. This book defines what we want that image to be. It defines what the Vaadin brand is. I hope that You are as excited and proud of living and breathing the Vaadin brand as I am. You are the one who is shaping what everyone thinks about Vaadin - using this brand as a tool and a guideline every day. Let’s fight for simplicity for both the users and the developers! Joonas Lehtinen Founder & CEO Vaadin I N T R O D U C T I O N
  2. 2. Apache 2.0
  3. 3. 150k+ active developers Apache 2.0
  4. 4. 40% of Fortune 100 companies use Vaadin 150k+ active developers Apache 2.0
  5. 5. 40% of Fortune 100 companies use Vaadin 150k+ active developers #2 Java Web Framework according to Open HUB stats Apache 2.0
  6. 6. things you'll learn 1. What it takes to build a modern web app 2. The building blocks of Vaadin 3. How to build a full stack app in 30 minutes
  7. 7. M O D E R N W E B A P P S
  8. 8. demo.vaadin.com/dashboard
  9. 9. MyController.java
  10. 10. MyController.java @RestController @RequestMapping("/analytics") public class AnalyticsController { @Autowired PatientsRepository patientsRepository; @RequestMapping(path = "/age", method = RequestMethod.GET) public Response getByAge() { ... } @RequestMapping(path = "/length", method = RequestMethod.GET) public Response getByLength() { ... } ...
  11. 11. MyController.java my-view.template.html @RestController @RequestMapping("/analytics") public class AnalyticsController { @Autowired PatientsRepository patientsRepository; @RequestMapping(path = "/age", method = RequestMethod.GET) public Response getByAge() { ... } @RequestMapping(path = "/length", method = RequestMethod.GET) public Response getByLength() { ... } ...
  12. 12. MyController.java my-view.template.html @RestController @RequestMapping("/analytics") public class AnalyticsController { @Autowired PatientsRepository patientsRepository; @RequestMapping(path = "/age", method = RequestMethod.GET) public Response getByAge() { ... } @RequestMapping(path = "/length", method = RequestMethod.GET) public Response getByLength() { ... } ... <nav> <a href="/analytics/age" routerLink <a href="/analytics/doctor" routerL <a href="/analytics/gender" routerL </nav> ...
  13. 13. MyController.java my-view.template.html my-view.css @RestController @RequestMapping("/analytics") public class AnalyticsController { @Autowired PatientsRepository patientsRepository; @RequestMapping(path = "/age", method = RequestMethod.GET) public Response getByAge() { ... } @RequestMapping(path = "/length", method = RequestMethod.GET) public Response getByLength() { ... } ... <nav> <a href="/analytics/age" routerLink <a href="/analytics/doctor" routerL <a href="/analytics/gender" routerL </nav> ...
  14. 14. MyController.java my-view.template.html my-view.css @RestController @RequestMapping("/analytics") public class AnalyticsController { @Autowired PatientsRepository patientsRepository; @RequestMapping(path = "/age", method = RequestMethod.GET) public Response getByAge() { ... } @RequestMapping(path = "/length", method = RequestMethod.GET) public Response getByLength() { ... } ... <nav> <a href="/analytics/age" routerLink <a href="/analytics/doctor" routerL <a href="/analytics/gender" routerL </nav> ... nav { justify-content: center; text-transform: uppercase; margin-bottom: 50px; } ...
  15. 15. MyController.java my-view.template.html my-view.css my-view.js @RestController @RequestMapping("/analytics") public class AnalyticsController { @Autowired PatientsRepository patientsRepository; @RequestMapping(path = "/age", method = RequestMethod.GET) public Response getByAge() { ... } @RequestMapping(path = "/length", method = RequestMethod.GET) public Response getByLength() { ... } ... <nav> <a href="/analytics/age" routerLink <a href="/analytics/doctor" routerL <a href="/analytics/gender" routerL </nav> ... nav { justify-content: center; text-transform: uppercase; margin-bottom: 50px; } ...
  16. 16. MyController.java my-view.template.html my-view.css my-view.js @RestController @RequestMapping("/analytics") public class AnalyticsController { @Autowired PatientsRepository patientsRepository; @RequestMapping(path = "/age", method = RequestMethod.GET) public Response getByAge() { ... } @RequestMapping(path = "/length", method = RequestMethod.GET) public Response getByLength() { ... } ... <nav> <a href="/analytics/age" routerLink <a href="/analytics/doctor" routerL <a href="/analytics/gender" routerL </nav> ... nav { justify-content: center; text-transform: uppercase; margin-bottom: 50px; } ... getAnalytics(grouping: string = 'age' return this.http .get(`${this.config.API_URL}/analy .map(res=>res.json()); }
  17. 17. F F S
  18. 18. F I G H T F O R S I M P L I C I T Y
  19. 19. new TextField(); new Button("Click me");
  20. 20. new HorizontalLayout( new TextField(), new Button("Click me") );
  21. 21. new VerticalLayout( new TextField(), new Button("Click me") );
  22. 22. layout = new VerticalLayout(); textField = new TextField(); button = new Button("Click Me");
  23. 23. layout = new VerticalLayout(); textField = new TextField(); button = new Button("Click Me"); button.addClickListener(click -> layout.addComponent( new Label(textField.getValue()) ));
  24. 24. layout = new VerticalLayout(); textField = new TextField(); button = new Button("Click Me"); button.addClickListener(click -> layout.addComponent( new Label(textField.getValue()) ));
  25. 25. private TextField firstName; private TextField lastName;
  26. 26. private TextField firstName; private TextField lastName; person = new Person();
  27. 27. private TextField firstName; private TextField lastName; person = new Person(); binder = new BeanBinder<>( Person.class);
  28. 28. private TextField firstName; private TextField lastName; person = new Person(); binder = new BeanBinder<>( Person.class); binder.bindInstanceFields(this);
  29. 29. save = new Button("Save", e -> { // try-catch binder.writeBean(person); Notification.show( person.toString()); }); private TextField firstName; private TextField lastName; person = new Person(); binder = new BeanBinder<>( Person.class); binder.bindInstanceFields(this);
  30. 30. save = new Button("Save", e -> { // try-catch binder.writeBean(person); Notification.show( person.toString()); }); private TextField firstName; private TextField lastName; person = new Person(); binder = new BeanBinder<>( Person.class); binder.bindInstanceFields(this);
  31. 31. @Autowired private PersonService service;
  32. 32. @Autowired private PersonService service; Grid<Person> grid = new Grid<>();
  33. 33. @Autowired private PersonService service; Grid<Person> grid = new Grid<>(); grid.addColumn("First name", Person::getFirstName); grid.addColumn("Last name", Person::getLastName); grid.addColumn("Email", Person::getEmail);
  34. 34. @Autowired private PersonService service; Grid<Person> grid = new Grid<>(); grid.addColumn("First name", Person::getFirstName); grid.addColumn("Last name", Person::getLastName); grid.addColumn("Email", Person::getEmail); grid.setItems(service.getPeople());
  35. 35. @Autowired private PersonService service; Grid<Person> grid = new Grid<>(); grid.addColumn("First name", Person::getFirstName); grid.addColumn("Last name", Person::getLastName); grid.addColumn("Email", Person::getEmail); grid.setItems(service.getPeople());
  36. 36. @Autowired private PersonService service; Grid<Person> grid = new Grid<>(); grid.addColumn("First name", Person::getFirstName); grid.addColumn("Last name", Person::getLastName); grid.addColumn("Email", Person::getEmail);
  37. 37. grid.addColumn("First name", Person::getFirstName); grid.addColumn("Last name", Person::getLastName); grid.addColumn("Email", Person::getEmail);
  38. 38. grid.addColumn("First name", Person::getFirstName); grid.addColumn("Last name", Person::getLastName); grid.addColumn("Email", Person::getEmail); grid.setDataSource( new BackEndDataSource<>( q -> service.getPeople( q.getOffset(), q.getLimit()) .stream(), q -> service.count()));
  39. 39. grid.addColumn("First name", Person::getFirstName); grid.addColumn("Last name", Person::getLastName); grid.addColumn("Email", Person::getEmail); grid.setDataSource( new BackEndDataSource<>( q -> service.getPeople( q.getOffset(), q.getLimit()) .stream(), q -> service.count()));
  40. 40. navBar = new HorizontalLayout(); navBar.addComponent( new Button("view1", click -> nav.navigateTo(""))); navBar.addComponent( new Button("view2", click -> nav.navigateTo("view2")));
  41. 41. navBar = new HorizontalLayout(); navBar.addComponent( new Button("view1", click -> nav.navigateTo(""))); navBar.addComponent( new Button("view2", click -> nav.navigateTo("view2"))); CssLayout navOutlet = new CssLayout(); addComponents(navBar, navOutlet);
  42. 42. nav = new Navigator(this, navOutlet); nav.addView("", new DemoView("Hello, I'm view 1")); nav.addView("view2", new DemoView("Hello, I'm view 2")); navBar = new HorizontalLayout(); navBar.addComponent( new Button("view1", click -> nav.navigateTo(""))); navBar.addComponent( new Button("view2", click -> nav.navigateTo("view2"))); CssLayout navOutlet = new CssLayout(); addComponents(navBar, navOutlet);
  43. 43. nav = new Navigator(this, navOutlet); nav.addView("", new DemoView("Hello, I'm view 1")); nav.addView("view2", new DemoView("Hello, I'm view 2")); navBar = new HorizontalLayout(); navBar.addComponent( new Button("view1", click -> nav.navigateTo(""))); navBar.addComponent( new Button("view2", click -> nav.navigateTo("view2"))); CssLayout navOutlet = new CssLayout(); addComponents(navBar, navOutlet);
  44. 44. $v-background-color: hsl(210, 0%, 100%);
  45. 45. $v-background-color: hsl(210, 0%, 33%);
  46. 46. $v-background-color: hsl(210, 0%, 100%); $v-border: 2px solid v-shade; $v-border-radius: 0; $v-bevel: false; $v-gradient: false; $v-shadow: false;
  47. 47. [insert code here]
  48. 48. github.com/vaadin-marcus/spring-boot-todo
  49. 49. TextField name = new TextField(); Button button = new Button("Greet"); layout.addComponents(name, button); button.addClickListener(click -> { Notification.show("Hi, " + name.getValue()); });
  50. 50. Initial HTML CSS JavaScript ~300k
  51. 51. {name: {value: 'Marcus'}, button: {event: 'clicked'}} 261 bytes

  52. 52. TextField name = new TextField(); Button button = new Button("Greet"); layout.addComponents(name, button); button.addClickListener(click -> { Notification.show("Hi, " + name.getValue()); });
  53. 53. TextField name = new TextField(); Button button = new Button("Greet"); layout.addComponents(name, button); button.addClickListener(click -> { Notification.show("Hi, " + name.getValue()); });
  54. 54. {name: {value: 'Marcus'}, button: {event: 'clicked'}} 261 bytes
 {new: [ {notification: 'Hi, Marcus'} ]} 267 bytes

  55. 55. .v-ui[width-range~="0-800px"]{ /* Styles for small devices */ } .v-ui[width-range~="801px-"]{ /* Styles for large devices */ }
  56. 56. .v-ui[width-range~="0-800px"]{ /* Styles for small devices */ } .v-ui[width-range~="801px-"]{ /* Styles for large devices */ } getPage().addBrowserWindowResizeListener( newSize -> { if (newSize.getWidth() > LARGE_DEVICE_WIDTH){ setupLargeLayout(); } else { setupSmallLayout(); } });
  57. 57. W E B S O C K E T S public class VaadinUI extends UI { ... }
  58. 58. W E B S O C K E T S public class VaadinUI extends UI { ... } @Push
  59. 59. W E B S O C K E T S public class VaadinUI extends UI { ... } @Push ui.access(() -> Notification.show("Alert!"));
  60. 60. Ɂ Ʌ ɂ Ƀ
  61. 61. Ɂ ɚ ɂ Ƀ
  62. 62. S T R O N G S E C U R I T Y
  63. 63. T H E J V M♥
  64. 64. E X T E N D A B L ELj
  65. 65. We'd be happy to help you.
  66. 66. T H A N K YO U @ M A R C U S H E L L B E R G 5 S T O R Y A N D P H I L O S O P H Y Software is eating the world and what most of us see of it is the user interface. The user interface has become the key component of how the users experience the business behind it. Competition is lost or won due to user experience. Simplicity is king and the users get frustrated by anything ugly, slow or not working on the device they happen to use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight. Together we want to build a user interface that puts a smile on the user’s face. Vaadin is the technology that empowers developers to build the best web-apps for business purposes. Our priority over everything else is developer productivity because we believe that by simplifying the developer experience and saving the developer’s time, they are best able to focus on building great user interfaces. Our brand is what we want everyone to think about us. When everyone - both us and the people around us - have a consistent understanding of what Vaadin is and what we stand for, it enables that image to spread and amplify. This book defines what we want that image to be. It defines what the Vaadin brand is. I hope that You are as excited and proud of living and breathing the Vaadin brand as I am. You are the one who is shaping what everyone thinks about Vaadin - using this brand as a tool and a guideline every day. Let’s fight for simplicity for both the users and the developers! Joonas Lehtinen Founder & CEO Vaadin I N T R O D U C T I O N

×