GDG-GELA-Frontend-Dev-Insights-Angular--My-Journey

Google Development Group in Gela. Talk on Frontend Development with Angular to share my journey as frontend lead and some recommendation and lesson learnt.

1. Frontend .
Development with
ngular

2. Marco Martorana

Mission: Transforming Academic knowledge into
impactful, real-world solutions.

Professional Experience:

+ Senior Software Engineer & Frontend Lead @ELCA
+ Development on frontend side with Angular
+ Development on backend side with Spring/Java

Teaching & Training

+ Organizer and facilitator of training courses:
+ Conducted: 3 Angular Courses
+ Conducted: 1 00P Course

Reach out for any questions!

3. This talk is a retrospective of
my experience as frontend lead
with Angular framework. I'm
going to share my personal
journey and some
recommendation and lesson
learnt.

4. Evolution of frontend ecosystem ...

5. Server Rendering
Traditional Web Application

Ul generated by server ex. with PHP, JSP, JSF

Initial Request +

HTML

Form Post +

Server
HTML

Page Reload!

6. Evolution of frontend ecosystem...

7. nt Side Rendering
Single Page Application

UI updated by client ex. Ajax, Angular

= 5 indexhtmi emery)

REQUEST DATA

8. The Angular framework

A framework for creating advanced web app in HTML (SPA)
Ecosystem consists of 17 millon developers, brary authors and content creators

giz hold Mb Akad Anka Ml? Mall Ari FRONT END BACK END

sans | noz? | orzo | esoo | nan | hot | mm | nas E
NN, M Wa

9. Evolution of frontend
ecosystem now

WEST PTI Peres

10. Reactive Programming RxJS

Reactive Programming - RxJS is a library for composing Languages
asynchronous and event-based programs by using observable : Je: fie

perico
sequences that provides: rie

CAUNty): Unix
Scala: RxScala
Clojure: RxGiojure
C++: RxCpp

Lua: RxLua

Ruby: Px
Python: RuPY

Go: PxGo
Groovy: RxGroovy
JRuby: PxuRuby

one core type -> Ihe Observable
satellite types -> Observer, Schedulers, Subjects

operators -> map, filter, reduce, every, etc

It allows handling asynchronous events as collections.

‘The main players:
7@ Siservnie PRODUCER)

I stream that pushes data over ime

H consumer ofan observable steam Kotin: RxKotin
‘Subscribe| | Em Vale iber - connects observer wih observable ‘Swift: PxSwitt
\ Operator a functon for ne en-oute dat transformation PHP: PHP.

Elixir: roaxive
Dart: RxDart

N@ observer (consumer)

11. Why use Reactive?

no YES

+ Angular Thinking Compliant with the frameworks architecture RxJS

+ Scalable Data Handling Reactive programming is well-suited for applications
with complex data flows

+ Declarative Syntax Reactive programming allows for a declarative style of
programming

+ Steep Learning Curve Reactive programming introduces concepts difficult
for developers

+ Overhead for Simple Use Cases Might introduce unnecessary complexity for
simple scenarios

+ Error Handling Complexity Handling errors can be more complex

12. Data manipulation with
Reactive Programming

Meteo Widget

GOAL: use RxJS operators
with Reactive Forms

13. Meteo Plugin RxJS

<— Observable
<— Operators

Observer

14. Evolution of frontend
ecosystem how

Bootstrap IN Vueis

Angus Angular vir

gs aan am comes Manzipesa CaaS 2015

0 EME pio

15. Server Side Rendering
Modern Applications

SERVER SIDE RENDERING |

Each request

-> ap
A A
a

16. Modern Angular

$ Rainer Hahnekamp

Standalone, Signals, Hydration, and more: We are currently witnessing the
making of the 3rd generation of . Unlike the switch from AngularJs
to Angular, it happens slowly, carefully, and keeping it backwards

compatible.

Exciting times to be an Angular developer,

17. Angular Renaissance

Serene ioducad in
Components vie

inject() function "sx

Control Flow Mrémsdin

Ge
Sods mind
ve
f A] Making RxJS te
https://angular.dev/ optional
ps:/langular.dow/ | à

bttos//anquiar dev/roadmapttexplore-modern-angular

CCE

an
Dec Di tom dew
rae

goma

18. Considerations / Lesson Learned

+ Tools / Languages Evaluate and use appropriate tools and
languages depending on specific goals

+ Knowledge Increase After acquiring a solid base in OOP,
HTML, CSS, JS, Git, and Docker..

+ Framework / Library Follow best practices to improve
quality and avoid bad practices to prevent mistakes.

+ Embrace the platform and write modern code

+ AlLeverage Al for trivial tasks but always be aware about
generated code

+ KIS Keep It Simple may seem trivial, but it is highly
relevant!

19. Considerations / Lesson Learned

+ Tools / Languages Evaluate and use appropriate tools and
languages depending on specific goals

+ Knowledge Increase After acquiring a solid base in OOP,
HTML, CSS, JS, Git, and Docker..

+ Framework / Library Follow best practices to improve
quality and avoid bad practices to prevent mistakes.

+ Embrace the platform and write modern code

+ AlLeverage Al for trivial tasks but always be aware about
generated code

+ KIS Keep It Simple may seem trivial, but it is highly
relevant!

20. Frontend Roadmap

hitps:roadmap shirontend

21. Contact Me

My Handle Social:
fi Linkestn:hitos www tinkedin comfin/marcom
©) Youtube: bips nu youtube. com/@MarcoMartorana

Who am |

cum road
—

Please subscribe my
YouTube channel: @MarcoMartorana