Recomendados
Más contenido relacionado
La actualidad más candente
Destacado
Similar a Vaadin Introduction at OOP 2014
Similar a Vaadin Introduction at OOP 2014 (20)
Último
Último (20)
Vaadin Introduction at OOP 2014
- 1. Introduction to 7 Vaadin OOP 2014, Münich .1 Johannes Eriksson Vaadin Ltd
- 2. What? Why?
- 3. How does it work? new L abel( “Hell o wor ld”) How do I use it?
- 6. User interface framework for rich web applications
- 10. Why?
- 12. expectations
- 13. reality
- 14. Challenge How to build consumer grade UX with business system budget
- 15. How? 1 Rich components 2 Server + Client 3 Embracing Java
- 19. 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 IE 9 98.1% IE 10 80% 80% 10 IE 10 2. O Opera th er Chrome s 1% 94% Chrome 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 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 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
- 27. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
- 34. constants and functions .scss $blue: #3bbfce;! $margin: 16px;! ! .content-navigation {! border-color: $blue;! color:! darken($blue, 9%);! }! ! .border {! padding: $margin / 2;! margin: $margin / 2;! border-color: $blue;! } .css .content-navigation {! border-color: #3bbfce;! color: #2b9eab;! }! ! .border {! padding: 8px;! margin: 8px;! border-color: #3bbfce;! }
- 35. mixins .scss @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;! } .css
- 36. 1 Rich components 2 Server + Client 3 Embracing Java
- 38. Web application layers JS Backend server Web server Communication required required required Java to JavaScript JavaScript required
- 39. Backend server Web server Communication Java to JavaScript JavaScript GWT required required required required optional JS Web application layers required required required required
- 40. 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
- 41. How does it work, really?
- 44. • • • • Initial HTML CSS (theme) Images JavaScript ! 1.2M total compress 307k 135k reduced widgetset and theme
- 45. • name=”Johannes” • button clicked ! 263 bytes
- 47. • name=”Johannes • button clicked ! 263 • Add notification ! 269 bytes
- 49. 1 Rich components 2 Server + Client 3 Embracing Java
- 52. GWT Compatible
- 54. Vaadin += GWT
- 56. 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
- 57. How do I get started?
- 60. Netbeans Download plugin Netbeans Plugin Portal
- 63. Download for Free vaadin.com/book -93- 1970 -1 01 > 600 pages PDF, ePub, HTML
- 64. Apache License
- 65. Community of 100.000+ developers Ohloh #2 used Java Web Framework