Vaadin intro
Upcoming SlideShare
Loading in...5
×
 

Vaadin intro

on

  • 758 views

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

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

Statistics

Views

Total Views
758
Views on SlideShare
700
Embed Views
58

Actions

Likes
0
Downloads
12
Comments
0

2 Embeds 58

https://twitter.com 49
http://confluence.rhemsolutions.com 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Vaadin intro Vaadin intro Presentation Transcript

  • 7 Vaadin intro @joonaslehtinen Founder & CEO
  • Intro to Vaadin “Hello world”) new Label(
  • New in 7
  • Getting started QA
  • User interface framework for rich web applications
  • Building blocks
  • Developer Productivity Rich UX
  • java html
  • 123 Key Ideas
  • 1 Rich Components
  • User Interface Data Source Theme
  • User Interface Data Source Theme
  • 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
  • 415+ add-on components
  • User Interface Data Source Theme
  • User Interface Data Source Theme
  • InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  • 2 Server + Client
  • Web application layers Backend server Web server Communication JavaScript
  • 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
  • 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
  • How does it work, really?
  • • • • • Initial HTML CSS (theme) Images JavaScript ! 1.2M total
 compress 307k reduced widgetset 135k
  • • name=”Joonas” • button clicked ! 261 bytes

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

  • Hello World!
  • Source https://github.com/vaadin/documentmanager HOWTO Screencast https://vaadin.com/learn
  • 3 Embracing Java
  • Any language on JVM
  • Internet Explorer Chrome Firefox Safari Opera iOS Android
  • No browser plugins / JRE ! Nothing to install
  • ∙ ∙ Servlet Portlet (most) clouds ∙∙∙ Anything Java
  • ∙ ∙ Eclipse IntelliJ IDEA Netbeans Maven / Gradle / Ant ∙∙∙ Anything Java
  • Java EE Spring OSGi REST ∙∙∙ Anything Java
  • 7 Vaadin .1
  • v0.1 2001 v3 2002 Open Source
  • v4 2006 Ajax v5 2007
  • 7 v6 2009 2013
  • 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
  • Renewed from Inside JS Sass HTML5 += GWT sh RPC State Pu Complete stack UI Field
  • vaadin.com/7
  • 7 Favorite picks
  • Vaadin += GWT
  • GWT Compatible
  • 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
  • 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
  • Architecture
  • Demo Sass
 Syntactically Awesome Stylesheets
  • Variables & functions
  • Mixins
  • Nesting
  • Selector Inheritance
  • Redesigned Forms
  • public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } ! Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee)); 6
  • 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()); } });
  • 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));
  • public class Person { ! @Size(min = 5, max = 50) private String name; ! @Min(0) @Max(100) private int age; ! // + constructor + setters + getters }
  • “Joonas Lehtinen” presentation model Component firstName = “Joonas”! lastName = “Lehtinen” Demo
  • Server Push
  • @Push MyUI ! ! <async-supported/> ! ! vaadin-push dependency
  • getting started
  • getting started
  • Eclipse Download plugin from Martketplace
  • IntelliJ IDEA Built-in support
  • Netbeans Download plugin Netbeans Plugin Portal
  • Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
  • Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
  • Apache License
  • community of 100.000+ developers Ohloh #2 used Java Web Framework
  • Vaadin 7.2 See you tomorrow
  • Vaadin 7.2 See you tomorrow
  • ? slideshare.com/ joonaslehtinen joonas@vaadin.com vaadin.com/joonas @joonaslehtinen