Tweet
Tweet

Slide 1

Slide 1 text

Implementando Paginas Web Moderna con Java Geovanny Mendoza @geovanny0401

Slide 2

Slide 2 text

Acerca de mí Jug Leander 11+ de experiencia Ing. Sistemas Especialista en Ing. Software Developer FullStack en IBM Blog: http://geovanny0401.blogspot.com/

Slide 3

Slide 3 text

Agenda Introducción a Vaadin Característica Principales Introducción a Spring Boot Demo

Slide 4

Slide 4 text

Vaadin es una plataforma de código abierto que simplifica el desarrollo de Aplicaciones Web

Slide 5

Slide 5 text

FRAMEWORK JAVA HERRAMIENTAS STARTERS COMPONENTES WEB

Slide 6

Slide 6 text

FRAMEWORK JAVA HERRAMIENTAS STARTERS COMPONENTES WEB

Slide 7

Slide 7 text

VAADIN FLOW HERRAMIENTAS STARTERS COMPONENTES WEB

Slide 8

Slide 8 text

Arquitectura de Vaadin

Slide 9

Slide 9 text

@Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } }

Slide 10

Slide 10 text

Web Server (Payara, WildFly, Tomcat, Jetty, Glassfish, Weblogic…) @Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } } app.war

Slide 11

Slide 11 text

@Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } }

Slide 12

Slide 12 text

@Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } }

Slide 13

Slide 13 text

@Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } }

Slide 14

Slide 14 text

@Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } }

Slide 15

Slide 15 text

@Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } }

Slide 16

Slide 16 text

@Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } }

Slide 17

Slide 17 text

@Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } }

Slide 18

Slide 18 text

@Route("greeting") public class HelloWorld extends VerticalLayout { public HelloWorld() { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener(event -> add(new Span("Hi, " + textField.getValue()))); add(textField, button); } }

Slide 19

Slide 19 text

Soporta todos los navegadores modernos con polyfills Compatibilidad con navegadores móviles para iOS y Android Aplicaciones de escritorio que utilizan navegadores integrados 1. Compatibilidad con todos los navegadores

Slide 20

Slide 20 text

2. API Estable API de componentes Java conocidos Los mismos componentes desde 2002 APIs del lado del cliente basadas en estándares de componentes web HTML

Slide 21

Slide 21 text

3. Diseño Responsivo Adaptación automática a diferentes tamaños de pantalla Utilice CSS o Java para cambiar el comportamiento

Slide 22

Slide 22 text

4. Progressive web applications (PWA) Instalar aplicaciones web en su escritorio o dispositivo Experiencia de usuario de tipo nativo

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

@Route("") @Theme(value = Lumo.class, variant = Lumo.DARK) public class MainView extends VerticalLayout { ... }

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Más de 30 Componentes Integrados UI - WEB

Slide 41

Slide 41 text

Más de 1700 complementos de terceros

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Starters https://bakery-flow.demo.vaadin.com/ https://vaadin.com/start/latest/simple-ui https://vaadin.com/start/latest/business-app https://vaadin.com/start/latest

Slide 44

Slide 44 text

INTRODUCCIÓN A SPRING Data JPA

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Hibernate: http://hibernate.org/ • JPA: La tecnica para convertir datos del sistemas de tipos de un lenguaje porientado a objetos y el modelo relacioal de la base de datos se conoce como mapeo objeto relacional (ORM, Object Relational Mapping) • JPA (Java Persistence API) es la especificación de ORM para Java. • Implementaciones JPA: Spring Data(1/4) Toplink: https://www.oracle.com/technetwork/middleware/toplink/overview/index.html

Slide 47

Slide 47 text

Spring Data(2/4) Objetos Tablas • Relación:

Slide 48

Slide 48 text

Spring Data(3/4) • Spring Boot nos permite usar la dependencia de Spring Data de manera mas facíl. • El proyecto Spring Data ofrece mecanimos para simplificar el acceso a diferentes bases de datos: • Spring Data JPA, Spring Data MongoDB, Spring Data JDBC extensions….

Slide 49

Slide 49 text

Spring Data(4/4) • La principales funcionalidades de Spring Data JPA son: • Conversion automatica entre objetos Java y el esquema de la base de datos. • Creación de consultas en base a métodos en interfaces. • En esta charla vamos a usar una base de datos en memoria H2.

Slide 50

Slide 50 text

Referencias http://vaadin.com/tutorials/ http://alejandrodu.com/ http://geovanny0401.blogspot.com

Slide 51

Slide 51 text

DEMO Vaadin Flow con Spring Data JPA y DBMS H2

Slide 52

Slide 52 text

Gracias Vaadin Ltd