Road to Full-Stack Development

Transcript

1. Road to Full Stack Development
2. ~whoami • Software Engineer with more than 7 years of experience. • Working at Redaptive Inc. • Community Organiser at GDG Jalandhar • Expertise in Angular, React, Ionic, Capacitor, Nodejs, Expressjs, Firebase, MongoDB, etc. • Love contributing to DevCommunity Simar Preet Singh @programmersingh
4. What is Full-Stack Development?
5. Stack?
6. Tech-Stack or Solutions Stack Combination of technologies used to build and run an application or project. Consists of: 󰗓 Programming language 󰗓 Frameworks 󰗓 Database 󰗓 Front-end tools 󰗓 Back-end tools 󰗓 Devops tools, etc.
8. How to become Full-Stack Developer?
9. Front-end Development Developing UI/UX
10. The very basic
11. Intermediate Level
13. Advanced Level
14. Feature React Angular Type Library (for UI) Full-fledged Framework
15. Feature React Angular Type Library (for UI) Full-fledged Framework Language JavaScript (JSX), supports TypeScript TypeScript (by default)
16. Feature React Angular Type Library (for UI) Full-fledged Framework Language JavaScript (JSX), supports TypeScript TypeScript (by default) Learning Curve Moderate (JSX is new for many) Steep (many concepts like services, DI)
17. Feature React Angular Type Library (for UI) Full-fledged Framework Language JavaScript (JSX), supports TypeScript TypeScript (by default) Learning Curve Moderate (JSX is new for many) Steep (many concepts like services, DI) Flexibility High – bring your own tools (routing, state mgmt) Low – all batteries included
18. Feature React Angular Type Library (for UI) Full-fledged Framework Language JavaScript (JSX), supports TypeScript TypeScript (by default) Learning Curve Moderate (JSX is new for many) Steep (many concepts like services, DI) Flexibility High – bring your own tools (routing, state mgmt) Low – all batteries included Syntax Style Component-based with JSX Component + Module + Template
19. Feature React Angular Type Library (for UI) Full-fledged Framework Language JavaScript (JSX), supports TypeScript TypeScript (by default) Learning Curve Moderate (JSX is new for many) Steep (many concepts like services, DI) Flexibility High – bring your own tools (routing, state mgmt) Low – all batteries included Syntax Style Component-based with JSX Component + Module + Template State Management Redux, Zustand, Context API Services, NgRx
20. Feature React Angular Type Library (for UI) Full-fledged Framework Language JavaScript (JSX), supports TypeScript TypeScript (by default) Learning Curve Moderate (JSX is new for many) Steep (many concepts like services, DI) Flexibility High – bring your own tools (routing, state mgmt) Low – all batteries included Syntax Style Component-based with JSX Component + Module + Template State Management Redux, Zustand, Context API Services, NgRx Community Huge, backed by Meta (Facebook) Large, backed by Google
21. Feature React Angular Type Library (for UI) Full-fledged Framework Language JavaScript (JSX), supports TypeScript TypeScript (by default) Learning Curve Moderate (JSX is new for many) Steep (many concepts like services, DI) Flexibility High – bring your own tools (routing, state mgmt) Low – all batteries included Syntax Style Component-based with JSX Component + Module + Template State Management Redux, Zustand, Context API Services, NgRx Community Huge, backed by Meta (Facebook) Large, backed by Google Performance Excellent, especially with hooks and memoization Good, but heavy in size
22. Feature React Angular Type Library (for UI) Full-fledged Framework Language JavaScript (JSX), supports TypeScript TypeScript (by default) Learning Curve Moderate (JSX is new for many) Steep (many concepts like services, DI) Flexibility High – bring your own tools (routing, state mgmt) Low – all batteries included Syntax Style Component-based with JSX Component + Module + Template State Management Redux, Zustand, Context API Services, NgRx Community Huge, backed by Meta (Facebook) Large, backed by Google Performance Excellent, especially with hooks and memoization Good, but heavy in size Use Case Modern web apps, SPAs, PWAs Enterprise-level apps, dashboards
23. Feature React Angular Type Library (for UI) Full-fledged Framework Language JavaScript (JSX), supports TypeScript TypeScript (by default) Learning Curve Moderate (JSX is new for many) Steep (many concepts like services, DI) Flexibility High – bring your own tools (routing, state mgmt) Low – all batteries included Syntax Style Component-based with JSX Component + Module + Template State Management Redux, Zustand, Context API Services, NgRx Community Huge, backed by Meta (Facebook) Large, backed by Google Performance Excellent, especially with hooks and memoization Good, but heavy in size Use Case Modern web apps, SPAs, PWAs Enterprise-level apps, dashboards Real-World Analogy Customizable home kitchen – you choose every appliance Luxury hotel kitchen – fixed menu, everything provided
24. React
25. Angular
26. React ✅ Huge ecosystem, reusable components ✅ Can be combined with any backend ❌ JSX might confuse beginners ❌ Too many choices – "React ka project banate banate architecture ka thesis likh diya"
27. Angular ✅ Powerful tooling, in-built routing, forms, HTTP ✅ Strong typing and large-scale architecture ❌ Verbose, slower initial load ❌ It’s like assembling IKEA furniture without an instruction manual – structured, but if you miss one screw, the whole shelf falls.
29. Some more Advanced Level Tools
30. What you should know/learn? • UI/UX • Single page application development • Hybrid App Development • Web Accessibility • Desktop App Development • Data Management • And many more things….
31. Back-end Development Developing Server Side Stuff
32. Popular Technologies
34. Node.js A javascript runtime with event driven, asynchronous, single threaded, non blocking I/O. • Built on Chrome’s V8 Engine. • Event driven • Asynchronous nature • Single Threaded • Scalable • Very fast streaming “Like a jugaadu mechanic – quick, flexible, gets things done”
35. Java Java is a programming language and a platform. Java is a high level, robust, object-oriented and secure programming language. • Object Oriented • Secure • Multi-Threaded • Strong memory storage • Portable • Dynamic “Like LIC agent – old school but super reliable”
36. Python • Easy to learn and use • Expressive (Uses English keywords) • Vast library • Embeddable • Specially used for ML and Data-Science “Like Google Pay – simple, effective, works almost everywhere” Python is a simple, general purpose, high level, and object-oriented programming language.
37. PHP PHP is an open-source, interpreted, and object-oriented scripting language that can be executed at the server-side. PHP is well suited for web development. • Faster than other scripting languages. • Directly embeddable in HTML • Object Oriented • Easy to learn. “Like Doordarshan – still running, but Gen Z may not get it”
38. Firebase BaaS, provided by Google for front-end devs. • Authentication • Realtime Cloud Firestore • Cloud Functions • Coud Storage • Cloud Messaging • Hosting • Free for starters • Analytics, Crashalytics and many more….
39. Databases Data should be stored somewhere
40. SQL No-SQL
44. Any Questions?
45. bio.link/programmersingh