About me

Hi, My name is Trung 😊

• Experienced FE engineer, specialized in branding, interactive application
• Frontend Engineer @cakedefi
• Organizer @Angular Vietnam
• Write, code, and talk about Angular

Angular Vietnam | @ngvnofficial

• Biggest Angular group in APAC
• Advocate and grow the Angular developer community in Vietnam
• 13k members
• Founded in 2017 by
  • Tiep Phan: Angular GDE
  • Chau Tran: NestJS core team
• 100 Days Of Angular series

Why TailwindCSS? 

I always encounter some use case where I need to set a simple CSS

1. Quick and dirty way: inline style

✅ Quick

❌ Difficult to override
❌ Messy code base

2. Create a new class for each element 

✅ More structure code,
✅ Encapsulated in a component

❌ If scoped inside a component, won't be able to reuse

3. Create a common CSS on a top-level component

✅ Can reuse the class

❌ Need to spend effort to structure CSS code
❌ Difficult for team member to follow without guideline

4. TailwindCSS

✅ Clear documentation with most of the util class written

✅ Maintain by a big community

✅ Integrated IDE support

✅ Support PurgeCSS, only load what you actually use for production bundle

✅ Reuse the same class, bundle size could be smaller

✅ Easy customization

❌ Learning curve for new team member

TailwindCSS @apply

TailwindCSS @apply

See more: https://trungk18.com/experience/configure-tailwind-css-with-angular

TailwindCSS + Jira Layout

Content

Sidebar

Nav

TailwindCSS + Layout

TailwindCSS + Layout

State Managment: Akita vs ngrx

✅ Avoid state manipulation everywhere
✅ Predictable data flow
✅ Easy to isolate bug
✅ Consistent when dealing with asynchronous

❌ NOT an easy concept to grasp.

What is state?

• The data (whatever that is!).
• All the variables in all the of the components.
• All the variables in the entire application.
• A store, like a Redux or Flux store.
• The behavior of the app at a given moment in time (this is my definition!).

When you should use state management?

When you should use state management?

When you should use state management?

When you should use state management?

What is state management?

• Provides with tools to create the data structure
• Provides a way to update them when the new actions occur
• Provides development tool

ngrx

Why not NgRx? Too much boilerplate

Let’s start with the boilerplate issue. Whenever I needed to use ngrx, I had to:

1. Create a set of actions.
2. Create a reducer function with a big switch statement.
3. Add the reducer to the StoreModule.forRoot or StoreModule.forFeature call.
4. Call select function in my component or create selectors to get the current state.
5. Call the dispatch function to dispatch an action.

Why not NgRx? Fetch Data

• Add an action that will be dispatched when data needs to be:
  • Fetched
  • Finished successfully
  • Failed
• Add an Effects class that will call the data service ​

It’s not a big problem if it’s not often needed. But fetching data from API is what front end dev do, though!

Too many concepts

RxJS

Angular

Components

Service

switchMap

concatMap

whateverMap

Subject

BehaviorSubject
ReplaySubject

ngrx

Akita

Akita

Deploy to Netlify

Netlify is an automation platform for web projects that is focused toward frontend developers.

The main features include continuous integration out of the box, free SSL, and CDN. The platform is great of the easy of use, fast deployment, and continuous integration.

I used Netlify to host the frontend

Heroku

Heroku is a cloud application platform

Heroku lets app developers spend 100% of their time on their application code, not managing servers, deployment, ongoing operations, or scaling.

I used Heroku to host my API

Demo