Web generators

1. #GX24
Web Generators
A glimpse into de future
#GX24
Nicolás Cardelino
@ncardeli
ncardelino@genexus.com

2. Fuente: www.idafrosk.com #GX24

3. TEMAS
USER EXPERIENCE SIMPLICITY
EXTENSIBILITY CODE GENERATION

4. USER EXPERIENCE
Fuente: www.flickr.com/photos/johnjoh/ #GX24

5. #GX24
Infinite Scrolling
Content
USE
R
EXPERIENC
E

6. #GX24
Infinite Scrolling
• Where do I scroll to retrieve new records?
• Grid
• Page
vs
US
ER
EX
PE
RIE
NC
E

7. #GX24
Infinite Scrolling
• When are new records retrieved?
• Automatically
• Manually
• Semi-automatically
• Custom Renders (e.g.: GxUI)
vs
US
ER
EX
PE
RIE
NC
E

8. Responsive Web Applications
#GX24
• X Evolution 3
• Focus on Efficacy
vs
US
ER
EX
PE
RIE
NC
E

9. Responsive Web Applications
#GX24
• New Features
• Focus on Efficiency and Completeness
vs
US
ER
EX
PE
RIE
NC
E

10. #GX24
US
ER
EX
PE
RIE
NC
E
Action Groups

11. SIMPLICITY
#GX24
Fuente: www.nelsoncarvalheiro.com/

12. #GX24
Theming
• Higher level of abstraction
• Basic and Advanced properties
• Direct theme class editing
vs
SI
MP
LIC
ITY

13. #GX24
Theming
• New Theme Classes
• GridRow
• ErrorViewerLine
• Feedback Mask
• Popup
SI
MP
LIC
ITY

14. #GX24
Theming
• Customizing controls according to their state
• Hovered Class
• Focused Class
• Highlighted Class
• Selected Class
vs
SI
MP
LIC
ITY

15. Runtime is the new Design time
#GX24
vs
From imagination to the application, in less than 1 minute
S Federico Azzato - Tomorrow, 11:45, Ballroom B
SI
MP
LIC
ITY

16. #GX24
From design to GeneXus
From design to application
S Cristian Inthamoussu - Tomorrow, 12:15, Ballroom B
SI
MP
LIC
ITY

17. EXTENSIBILITY
#GX24
Fuente: www.flickr.com/photos/chrismar/

18. #GX24
Custom controls
EX
TE
NS
IBI
LIT
Y

19. 3 </>
• Run inside GeneXus the browser
IDE
• Mustache Templates
• Helper JS
Assemblies
E
w
Abstract to HTML!
Specifier and Generator!
Runtime transformations!
Abstract Form!
Design HTML!
Generated HTML!
Rendered HTML!
EX
TE
NS
IBI
LIT
Y
V Web From!

20. #GX24
Customizing a CheckBox
EX
TE
NS
IBI
LIT
Y

21. CODE
GENERATION
#GX24
Fuente: www.shashin.co.uk/

22. #GX24
Accessibility
• Semantic HTML
• WAI-ARIA
• Roles, Properties and States
• Keyboard
CO
DE
GE
NE
RA
TIO
N

23. #GX24
W3C Web Components
CO
DE
GE
NE
RA
TIO
N

24. #GX24
W3C Web Components
Custom Elements
Templates
Shadow DOM
HTML Imports
CO
DE
GE
NE
RA
TIO
N

25. #GX24
CO
DE
GE
NE
RA
TIO
N

26. CO
DE
GE
NE
RA
TIO
N

27. #GX24
Browsers
CO
DE
GE
NE
RA
TIO
N

28. #GX24
Short Term
vs
CO
DE
GE
NE
RA
TIO
N

29. #GX24
Z
Medium/Long Term
Z
Grid WebComponent
CO
DE
GE
NE
RA
TIO
N

30. #GX24
Medium/Long Term
ZZ
CO
DE
GE
NE
RA
TIO
N

31. #GX24

32. <Thank You!>

33. #GX24
Nicolás Cardelino
ncardelino@genexus.com
@ncardeli