Web generators

33
#GX24 #GX24 Web Generators A glimpse into de future Nicolás Cardelino @ncardeli [email protected]

description

Web generators

Transcript of Web generators

Page 1: Web generators

#GX24 #GX24

Web Generators A glimpse into de future

Nicolás Cardelino

@ncardeli [email protected]

Page 2: Web generators

#GX24 Fuente: www.idafrosk.com

Page 3: Web generators

TEMAS

USER EXPERIENCE SIMPLICITY

CODE GENERATION EXTENSIBILITY

Page 4: Web generators

#GX24 Fuente: www.flickr.com/photos/johnjoh/

USER EXPERIENCE

Page 5: Web generators

#GX24

Infinite Scrolling

Content

USE

R EXPERIENCE

Page 6: Web generators

#GX24

Infinite Scrolling

•  Where do I scroll to retrieve new records?

•  Grid

•  Page vs

US

ER EXPERIENCE

Page 7: Web generators

#GX24

Infinite Scrolling

•  When are new records retrieved?

•  Automatically

•  Manually

•  Semi-automatically

•  Custom Renders (e.g.: GxUI)

vs

US

ER EXPERIENCE

Page 8: Web generators

#GX24

Responsive Web Applications

•  X Evolution 3

•  Focus on Efficacy

vs

US

ER EXPERIENCE

Page 9: Web generators

#GX24

Responsive Web Applications

•  New Features

•  Focus on Efficiency and Completeness

vs

US

ER EXPERIENCE

Page 10: Web generators

#GX24

US

ER EXPERIENCE

Action Groups

Page 11: Web generators

#GX24

SIMPLICITY

Fuente: www.nelsoncarvalheiro.com/

Page 12: Web generators

#GX24

Theming

•  Higher level of abstraction

•  Basic and Advanced properties

•  Direct theme class editing

vs

SIMPLICITY

Page 13: Web generators

#GX24

•  New Theme Classes

•  GridRow

•  ErrorViewerLine

•  Feedback Mask

•  Popup

Theming SI

MPLICITY

Page 14: Web generators

#GX24

Theming

•  Customizing controls according to their state

•  Hovered Class

•  Focused Class

•  Highlighted Class

•  Selected Class

vs

SIMPLICITY

Page 15: Web generators

#GX24

Runtime is the new Design time

vs

From imagination to the application, in less than 1 minute Federico Azzato - Tomorrow, 11:45, Ballroom B S

SIMPLICITY

Page 16: Web generators

#GX24

From design to GeneXus

From design to application Cristian Inthamoussu - Tomorrow, 12:15, Ballroom B S

SIMPLICITY

Page 17: Web generators

#GX24

EXTENSIBILITY

Fuente: www.flickr.com/photos/chrismar/

Page 18: Web generators

#GX24

Custom controls EXTENSIBILITY

Page 19: Web generators

•  Run inside GeneXus IDE

•  Mustache Templates

•  Helper Assemblies

•  Run inside the browser

•  Mustache Templates

•  Helper JS

3 </>

E w

Abstract to HTML !

Specifier and Generator!

Runtime transformations!

Abstract Form !

Design HTML !

Generated HTML !

Rendered HTML !

EXTENSIBILITY

V Web From !

Page 20: Web generators

#GX24

Customizing a CheckBox EXTENSIBILITY

Page 21: Web generators

#GX24

CODE GENERATION

Fuente: www.shashin.co.uk/

Page 22: Web generators

#GX24

Accessibility

•  Semantic HTML

•  WAI-ARIA

•  Roles, Properties and States

•  Keyboard

CO

DE GENERATION

Page 23: Web generators

#GX24

W3C Web Components CO

DE GENERATION

Page 24: Web generators

#GX24

Custom Elements

W3C Web Components

Templates

Shadow DOM

HTML Imports

CO

DE GENERATION

Page 25: Web generators

#GX24

CO

DE GENERATION

Page 26: Web generators

CO

DE GENERATION

Page 27: Web generators

#GX24

Browsers CO

DE GENERATION

Page 28: Web generators

#GX24

Short Term

vs

CO

DE GENERATION

Page 29: Web generators

#GX24

ZMedium/Long Term

ZGrid WebComponent

CO

DE GENERATION

Page 30: Web generators

#GX24

Medium/Long Term

ZZ

CO

DE GENERATION

Page 31: Web generators

#GX24

Page 32: Web generators

<Thank You!>

Page 33: Web generators

#GX24

@ncardeli [email protected] Nicolás Cardelino