Modern Enterprise Application Development with Angular, Nestjs, Azure

Modern Enterprise Application Development with Angular, Nestjs, Azure

Transcript

1. Modern Enterprise App Dev With Azure & Typescript
2. @JecelynYeen GDE - Web technologies, Angular Software Architect
3. Typescript in General Backend - Nodejs & Nestjs Frontend - Angular Infrastructure - Azure Live Demo Maybe?
5. Back in the day, when I was .NET Developer...
6. This is how I see JavaScript... - JQuery, for cosmetic purpose and AJAX! - Dynamic, you can do anything - Messy, for toy project only - No intellisense - For client only - Hipster, why split to front-end and back-end? - Why no GUI, why command line only? - Why no out-of-the box template? - How do I host it? Where is my IIS?
7. The Game Changer
8. Typescript - By Microsoft - Provide types, no more magic - Intellisense, yay! - Great tooling supports - C# like coding experiences
9. Foundation for Angular & Nestjs
10. Backend
11. Story of Building LEGO house
12. Simple, Intuitive, Easy to Start
13. Structure, Details, Layout
15. Design & Plan Modular Ecosystem
16. JavaScript runtime that build on top of Google Chrome’s V8 engine
17. Nodejs is simple - Setup Time: 1 minute - Code: 2 lines
20. Why Nodejs?
21. Nodejs is simple. Wait, what is the definition of simple?
22. Nodejs is simple up to a certain point When build medium - large applications, the definition of simple change.
23. Application Issues (Medium to Large) - Nodejs Lack of Common Architecture Fragile Execution Problematic Growth
24. We need... Structure Robustness Scalability
25. “We build our computer (systems) the way we build our cities. Over time, without a plan, on top of ruins.” - Ellen Ullman
27. Why Nestjs? Application Structure Dependency Injection Middleware Structure Platform Agnostic
30. What’s (the good stuffs) in the project?
31. Core Concepts
32. Find out more about Nestjs: https://speakerdeck.com/chybie/progressive- nest
33. Frontend
36. Challenges of building Enterprise Software
37. Reliability & Stability
38. Reliability & Stability - Google internally have 400+ applications using Angular - Pre-release tests for free - Before release new version of Angular, Google will first test on their applications make sure it works - Angular is open source (link), all codes & issues reported are transparent - Predictable versioning & releases (link) - Semantic release: major.minor.patch - A major release every 6 months - 1-3 minor releases for each major release - A patch release almost every week - Built-in protection for common web vulnerabilities (link) - Update guide & CLI command for update Angular application
39. S Structure
40. Structure - Angular CLI to create projects, generate different blueprints(components, services) - Provide standard project skeleton - Workspace concept(link) - Test setup - unit test, end-end - Dev server & build command ready - Angular styleguide (link) and built-in linting - Nx from nrwl.io - an open source toolkit for enterprise Angular applications - Dependency injection - Out of the box solution - routing, http client, forms, polyfills, css preprocessor
41. S Robustness
42. Robustness - Typescript - Static typing, no more fragile execution - Linting - eliminate possible errors before commits - Angular Language Service (vscode extensions) - report errors during editing
43. S Scalability
44. Scalability: Team - Hiring & training - How fast to get a junior (fresh) productive? - How fast to get a programmer to be productive? - Full stack development - Can backend developers leverage their skills in frontend? - Resources available - videos, stackoverflow, community
45. Scalability: Application - Resources available - open source libraries - Enterprise grade (paid): Telerik, DevExtreme - Components & Design systems: PrimeNg, Material UI, Nebula, Clarity, ngx-bootstrap, ngx-admin - State management - NgRx, NgXs, Akita, MobX - Plugins - Firebase, Auth0, Angular CDK - Learn once, use everywhere - Ionic (Hybrid) - NativeScript (Native) - NestJs (Backend) - Lazy loading built in - Built-in Optimization
46. “It’s never on how difficult is to write bad code, it’s on how easy is to write good code.”
47. They choose Angular. https://www.madewithangular.com/categories/angular
48. Infrastructure - Azure
49. Deployment - Angular: 3 ways - Nodejs & Nestjs
50. Live Demo?
51. Thank You!