advertisement

Javantura Zagreb 2014 - Vaadin - Peter Lehto

50 %
50 %
advertisement
Information about Javantura Zagreb 2014 - Vaadin - Peter Lehto
Technology

Published on March 10, 2014

Author: hujak

Source: slideshare.net

Description

Konferencija Javantura Zagreb 2014 by HUJAK

Vaadin - thinking of U and I - by Peter Lehto

Vaadin (vaadin.com) je Java framework za rapidni razvoj visoko interaktivnih HTML5 web aplikacija na poslužitelju. On sakriva tehnologije prijenosa dokumenata i stanja (DOM, AJAX, JSON) i omogućuje da web aplikacije budu razvijene u Javi prema metafori desktop aplikacija. Vaadin iskorištava svu moć GWT-a, Java-to-JavaScript prevoditelja, pa je moguće razviti cijeli stog web aplikacija i nove komponente na strani klijenta bez napuštanja Java okruženja. Brzi razvoj olakšava veliki izbor komponenata i trenutni deployment na poslužitelj. Vaadin aplikacije koje se izvode na poslužitelju pružaju veliko povećanje sigurnosti, kao i povezivanje Vaadin sučelja na bilo koji postojeći backend sustav. U predavanju bit će prikazan pregled Vaadin 7.1 mogučnosti, pogled na Vaadin arhitekturu i što se zapravo događa iza kulisa frameworka, a bit će raspravljene i značajke koje donosi Vaadin 7.2.
advertisement

Introduction to Peter Lehto 7 Vaadin .1Javantura 2014, Zagreb

What? Why?

How do I use it? new Label(“Hello world”) How does it work?

How do Igetstarted? QAWhat’s newin Vaadin 7.2

?

User interface framework for Rich Internet Applications

Why?

To strive on developer productivity

JavaScript DOM AJAX JSON … htmljava

1Server-side RIA 2Rich components 3Embracing Java How?

Servlet backend GWT frontend

Server-side RIA DOM Client Server ViewHTML Page over HttpResponse Controller Model Parameters over HttpRequest DB 4 5 6 2 TerminalAdapter TerminalAdapter Automated by the RIA framework 3 7 1 9 8 Handled by the framework

Example

• Initial HTML • CSS (theme) • Images • JavaScript 1.2M 307k compress 135k reduced widgetset and theme

• name=”Johannes” • button clicked 263 bytes

• name=”Johannes” • button clicked 263 bytes • Add notification 269 bytes

Demo

The architecture of Vaadin

server client Component Widget Connector RPC State

1Server-side RIA 2Rich components 3Embracing Java How?

User Interface Data Source Theme

What kind of devices does your app support? 98.1% 3Desktop browsers Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% p support? 98.1% 25.7% Phones 36.1% blets Others 2.1% “Since gwt is used ext in the enterprise, this m explain why tablets are m popular than support for phones” Daniel iPhoneAndroidWP 8 n UI for of appstaken numberpe. Phones 36.1% Tablets Others “Since gwt is used extensively in the enterprise, this may explain why tablets are more popular than support for phones” Daniel iPad AndroidWindows 8

400+ add-on components

User Interface Data Source Theme

InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...

User Interface Data Source Theme

sass (syntactically awesome stylesheets)

$blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } .scss constants and functions .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } .css

@mixin table-base { th { text-align: center; font-weight: bold; } td,th {padding: 2px} } @mixin left($dist) { float: left; margin-left: $dist; } #data { @include left(10px); @include table-base; } #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data #th { padding: 2px; } .scss .css mixins

1Server-side RIA 2Rich components 3Embracing Java How?

Any language on JVM Java Scala Groovy Clojure Python Ruby Ceylon …

Eclipse IntelliJ IDEA Netbeans Maven Ant ∙ ∙ ∙ Multiple development environments

GWT Compatible

Vaadin += GWT

Server- Client- sideOptim izedfor ProductivityOptim izedfor Control

What’s new in Vaadin 7.2 Beta release Roadmapped to Q1/2014

Grid component Table and TreeTable component “replacement” Usable also as pure client side widget Client side data source API

Grid component Low level Escalator widget for optimized rendering performance Frozen columns Variable row and column sizes

Grid component Components in header and footer Clean and Extensible implementation

New Theme Customizable theme based on SASS Effortlessly change sizings, paddings, margins and color schemes.

Responsive layout support integrated New Theme “Breakpoints” allow changing layouts based on device resolution or browser window size

“Unit tests” for UI with new VaadinDriver Support for TestBench 4.0 Easier and cleaner way to select and interact with elements in DOM tree

Official support for Windows Phone Support for TouchKit 4.0 New touckit theme in addition of current iOS theme

How do I get started?

Eclipse Download plugin from Marketplace

IntelliJ IDEA Built-in support

Netbeans Download plugin Netbeans Plugin Portal

mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype- application -DarchetypeVersion= 7.1.11 Maven

Download for Free vaadin.com/book > 600 pages 01 -93-1970-1 PDF, ePub, HTML

Ohloh #2 used Java Web Framework Community of 100.000+

By Marko Grönroos ABOUT VAADIN .dzone.comGetMoreRefcardz!Visitrefcardz.com#85 Getting Started with Vaadin CONTENTS INCLUDE: About Vaadin Creating An Application Components Layout Components Themes Data Binding and more... Vaadin is a server-side Ajax web application development framework that allows you to build web applications just like with traditional desktop frameworks, such as AWT or Swing. An application is built from user interface components contained hierarchically in layout components. In the server-driven model, the application code runs on a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server communications and any client-side technologies, such as HTML and JavaScript, are invisible to the developer. As the client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache License 2.0. Figure 1: Vaadin Client-Server Architecture If the built-in selection of components is not enough, you can Figure 2: Architecture for Vaadin Applications Hot Tip You can get a reference to the application object from any component attached to the application with Event Listeners In the event-driven model, user interaction with user interface components triggers server-side events, which you can handle Web Browser Client-Side Engine Java Web Server Vaadin UI Components Your Java Application Web Service EJB DB Servlet Container User Application Event Listener Data Model Application Themes Application Resources Default Theme File Resources External Resources Database Data Binding Inherits Events Changes AJAX Requests Inherits UI Component Java Servlet Application Class Web Browser Client-Side Engine brought to you by...

Questions? Comments? peter@vaadin.com

#data presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Javantura Zagreb 2014 - Vaadin - Peter Lehto - YouTube

Javantura Zagreb 2014 - Vaadin - Peter Lehto Javantura conference. Subscribe Subscribed Unsubscribe 16 16. Loading... Loading... Working...
Read more

Javantura Zagreb 2014 - universAAL - Andrej Grgurić - YouTube

Javantura Zagreb 2014 - universAAL - Andrej Grgurić Javantura conference. ... Javantura Zagreb 2014 - Vaadin - Peter Lehto - Duration: 35:42.
Read more

Predavači - Javantura | Java conference – Zagreb ...

Peter Lehto. Peter Lehto je Vaadin Expert i Project Manager u Vaadin timu koji svakodnevno radi na ... Konferencija Javantura v2 Zagreb 2014; ...
Read more

Program - Javantura | Java conference – Zagreb, Croatia ...

Program predavanja na konferenciji Javantura Zagreb 2014. 09:00-09:30 ... Javantura v1 Feb 2014. Program @ Javantura v1 ... Peter Lehto: Test ...
Read more

Company - vaadin.com - Vaadin – User Interface ...

peter_lehto. vaadin.com/peter. ... 2014: Jan Feb Mar Apr May Jun ...
Read more

joshlong/vaadin-and-spring-talk · GitHub

joshlong / vaadin-and-spring-talk. Code; ... 2014: README.asc: Update ... Join Spring developer advocate Josh Long and Vaadin engineer and expert Peter ...
Read more

Veljača | 2014 | HUJAK - Hrvatska udruga Java korisnika

Java konferencija Javantura Zagreb 2014 je ... da bi sve završilo izvrsnim predavanjem o frameworku Vaadin za ... thinking of U and I – Peter Lehto;
Read more