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

Dynamic Angular Applications - Juan Herrera - @jdjuan

Google Developer Expert

Google Developer Expert

Ask me how to become a:

⭐️ Google Developer Expert ⭐️

Dynamic Angular Applications - Juan Herrera - @jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

@jdjuan

Dynamic Angular Applications - Juan Herrera - @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

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

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

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

JIT

.TS

Dynamic Angular Applications - Juan Herrera - @jdjuan

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

@jdjuan

Dynamic Angular Applications - Juan Herrera - @jdjuan

THANK YOU!

Dynamic Angular Applications - Juan Herrera - @jdjuan

@jdjuan

Made with Slides.com