Vaadin intro

1,157 views
986 views

Published on

Updated Vaadin introductory presentation given at DevNexus Atlanta on Feb 24, 2014.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,157
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vaadin intro

  1. 1. 7 Vaadin intro @joonaslehtinen Founder & CEO
  2. 2. Intro to Vaadin “Hello world”) new Label(
  3. 3. New in 7
  4. 4. Getting started QA
  5. 5. User interface framework for rich web applications
  6. 6. Building blocks
  7. 7. Developer Productivity Rich UX
  8. 8. java html
  9. 9. 123 Key Ideas
  10. 10. 1 Rich Components
  11. 11. User Interface Data Source Theme
  12. 12. User Interface Data Source Theme
  13. 13. s 3 3.5 Browsers to support in 2012 yo ur ap Desktop 3.5 Browsers to support in 2012 browsers pp p su lic pp at r 9 io n or t? 8% U I fo ov of er ap r th take ps e nu n ro pe mb er . 36 .1% 6/7 IE 6/7 6/7 Opera Safari 14% IE 6/7 14% Ta bl et s 18% 9 10 36% 36% 18% Safari IE 9 79% 79% 9 98.1% IE 10 80% 80% 10 2. O Opera th er Chrome s 1% 94% iP ad 94% An 3 W dr6 in o.1 do id% “S w What kind of devices does yourh app support? in ince ex t e gw s po plai ent t is 8 ph pul n w erp us e r a h IE 9 IE 10 Browsers developers expect to support in 2013 Browsers developers expect to support in 2013 on r is d es tha y ta e, t ex ” n ble his ten su ts m si Chrome in 8 54% 54% IE 8 Firefox Ph on es 94% iPh A 94%nd one 2 Firefox inc e ex the gw po plain ente ph pula wh rp on r t y t es ha ab n ” su pp 8 IE 8 “S W 5 ro P .7 id 8% Da ni el
  14. 14. 415+ add-on components
  15. 15. User Interface Data Source Theme
  16. 16. User Interface Data Source Theme
  17. 17. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  18. 18. 2 Server + Client
  19. 19. Web application layers Backend server Web server Communication JavaScript
  20. 20. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required required required optional required required required required
  21. 21. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required 1 layer required vs required 3 layers -50% codelines -50% development required required -50% maintenance easier to learn required required optional
  22. 22. How does it work, really?
  23. 23. • • • • Initial HTML CSS (theme) Images JavaScript ! 1.2M total
 compress 307k reduced widgetset 135k
  24. 24. • name=”Joonas” • button clicked ! 261 bytes

  25. 25. • name=”Joonas” • button clicked ! 261 bytes • Add notification ! 267 bytes

  26. 26. Hello World!
  27. 27. Source https://github.com/vaadin/documentmanager HOWTO Screencast https://vaadin.com/learn
  28. 28. 3 Embracing Java
  29. 29. Any language on JVM
  30. 30. Internet Explorer Chrome Firefox Safari Opera iOS Android
  31. 31. No browser plugins / JRE ! Nothing to install
  32. 32. ∙ ∙ Servlet Portlet (most) clouds ∙∙∙ Anything Java
  33. 33. ∙ ∙ Eclipse IntelliJ IDEA Netbeans Maven / Gradle / Ant ∙∙∙ Anything Java
  34. 34. Java EE Spring OSGi REST ∙∙∙ Anything Java
  35. 35. 7 Vaadin .1
  36. 36. v0.1 2001 v3 2002 Open Source
  37. 37. v4 2006 Ajax v5 2007
  38. 38. 7 v6 2009 2013
  39. 39. 934 tickets closed during 16 months of development Oldest ticket created 3/2008 Newest ticket 2/2013 3939 commits made by 23 authors 93 % by 6 persons > 1 000 000 lines of code touched
  40. 40. Renewed from Inside JS Sass HTML5 += GWT sh RPC State Pu Complete stack UI Field
  41. 41. vaadin.com/7
  42. 42. 7 Favorite picks
  43. 43. Vaadin += GWT
  44. 44. GWT Compatible
  45. 45. ity tiv or df ize tim uc Op od Pr O tim p fo ed iz e rol d ont i C s r e v r e S r tien Cl
  46. 46. or df ize O P d ro tim p ed iz or f it iv ct u rrve Se ol tim ntr Op e sid Co t n e i l C
  47. 47. Architecture
  48. 48. Demo Sass
 Syntactically Awesome Stylesheets
  49. 49. Variables & functions
  50. 50. Mixins
  51. 51. Nesting
  52. 52. Selector Inheritance
  53. 53. Redesigned Forms
  54. 54. public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } ! Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee)); 6
  55. 55. form.setFormFieldFactory(new FormFieldFactory() { ! public Field createField(Item item, Object propertyId, Component uiContext) { ! 6 if ("birthDate".equals(propertyId)) { DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; } ! // .. ! return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });
  56. 56. GridLayout form = new GridLayout(2,2) { TextField TextField TextField DateField { } }; firstName = new TextField("First name"); lastName = new TextField("Last name"); salary = new TextField("Salary"); birthDate = new DateField("Birth date"); 7 birthDate.setResolution(Resolution.DAY); setSpacing(true); addComponent(firstName); addComponent(lastName); addComponent(birthDate); addComponent(salary); BeanFieldGroup<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class); fieldGroup.bindMemberFields(form); fieldGroup.setItemDataSource(new BeanItem<Employee>(employee));
  57. 57. public class Person { ! @Size(min = 5, max = 50) private String name; ! @Min(0) @Max(100) private int age; ! // + constructor + setters + getters }
  58. 58. “Joonas Lehtinen” presentation model Component firstName = “Joonas”! lastName = “Lehtinen” Demo
  59. 59. Server Push
  60. 60. @Push MyUI ! ! <async-supported/> ! ! vaadin-push dependency
  61. 61. getting started
  62. 62. getting started
  63. 63. Eclipse Download plugin from Martketplace
  64. 64. IntelliJ IDEA Built-in support
  65. 65. Netbeans Download plugin Netbeans Plugin Portal
  66. 66. Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
  67. 67. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
  68. 68. Apache License
  69. 69. community of 100.000+ developers Ohloh #2 used Java Web Framework
  70. 70. Vaadin 7.2 See you tomorrow
  71. 71. Vaadin 7.2 See you tomorrow
  72. 72. ? slideshare.com/ joonaslehtinen joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×