Dynamic Angular Applications

Build Once, Customize on Demand

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

@caroso1222

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

ngcolombia.com

Dynamic Angular Applications - Juan Herrera - @jdjuan

Ask me how to become a:

⭐️ Google Developer Expert ⭐️

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

slides.com/
jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

PROBLEM

Dynamic Angular Applications - Juan Herrera - @jdjuan

1/6

Clients often require the same solution

Dynamic Angular Applications - Juan Herrera - @jdjuan

...just slightly different

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

SOLUTION

Dynamic Angular Applications - Juan Herrera - @jdjuan

2/6

CONTEXT

Dynamic Angular Applications - Juan Herrera - @jdjuan

3/6

Development Time

Dynamic Angular Applications - Juan Herrera - @jdjuan

Compilation Time

Dynamic Angular Applications - Juan Herrera - @jdjuan

Runtime

Dynamic Angular Applications - Juan Herrera - @jdjuan

Timer After Time

Runtime

Compilation

Development

3 TYPES

Dynamic Angular Applications - Juan Herrera - @jdjuan

Just in Time (JIT)

Ahead of Time (AOT)

2 TYPES

Dynamic Angular Applications - Juan Herrera - @jdjuan

Ahead of Time (AOT)

Ahead of Time (AOT)

Just in Time (JIT)

Just in Time (JIT)

BALANCE?

AOT

Dynamic Angular Applications - Juan Herrera - @jdjuan

JIT

SETUP

Dynamic Angular Applications - Juan Herrera - @jdjuan

4/6

1. Config File

Dynamic Angular Applications - Juan Herrera - @jdjuan

.JSON

2. Fetching

Dynamic Angular Applications - Juan Herrera - @jdjuan

.TS

3. Use

Dynamic Angular Applications - Juan Herrera - @jdjuan

.HTML

Dynamic Angular Applications - Juan Herrera - @jdjuan

DEMO

COMPONENTS

Dynamic Angular Applications - Juan Herrera - @jdjuan

5/6

AOT

Dynamic Angular Applications - Juan Herrera - @jdjuan

Show or hide DOM

Change CSS Classes

Add or skip logic

Dynamic Angular Applications - Juan Herrera - @jdjuan

.JSON

Dynamic Angular Applications - Juan Herrera - @jdjuan

Show or hide DOM

.HTML

Dynamic Angular Applications - Juan Herrera - @jdjuan

Change CSS Classes

.HTML

Add or skip logic

.TS

DEMO

Dynamic Angular Applications - Juan Herrera - @jdjuan

JIT

Dynamic Angular Applications - Juan Herrera - @jdjuan

HTML to be rendered

CSS Rules to be applied

JS code to be executed

HTML to be rendered

.JSON

HTML to be rendered

.HTML

CSS Rules to be applied

.JSON

CSS Rules to be applied

.HTML

JS code to be executed

.JSON

JS code to be executed

.TS

DEMO

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

Components on the fly
 

ROUTES

Dynamic Angular Applications - Juan Herrera - @jdjuan

6/6

AOT

.TS

AOT

.TS

Dynamic Angular Applications - Juan Herrera - @jdjuan

DEMO

JIT

.TS

Dynamic Angular Applications - Juan Herrera - @jdjuan

DEMO

SUMMARY!

Dynamic Angular Applications - Juan Herrera - @jdjuan

Runtime

Compilation

Development

3 TYPES

Dynamic Angular Applications - Juan Herrera - @jdjuan

Just in Time (JIT)

Ahead of Time (AOT)

2 TYPES

Dynamic Angular Applications - Juan Herrera - @jdjuan

AOT

JIT

AOT

JIT

Dynamic Angular Applications - Juan Herrera - @jdjuan