Web Development - Roadmap to MERN stack development
- 1. Getting started with Web Development By:- Swapnil Narayan Software Engineer at Microsoft
- 2. About the Speaker Hey there, I’m Swapnil Narayan, a graduate from at IIT(ISM) Dhanbad with Computer Science majors. I’m a Software Engineer at Microsoft India, and have also got offers from Amazon and Oracle for Software Engineering roles. I’m a very passionate Web Dev Instructor and have a decent experience for the same at various Edtech Companies. I have taken webinars with various IITs, NITs, IIITs and other Engineering Colleges in India. I will be your mentor for the Web App Development Session and will walk you through the topics the following slides.
- 3. Timeline ● Why learn web dev? ● Web Dev - Frontend ● Web Dev - Backend ● Databases ● Intro to APIs, JSON ● IDE’s and Environment
- 4. ● Internships ● GSoC ● Startups ● Tech Fests ● Native Apps Why Web Dev?
- 5. Frontend Vs Backend https://news.codecademy.com/front-end-vs-back-end/ - The front end of an application typically refers to the layer that represents the UI (user interface). - It is what a user sees in a website - Backend is usually where the login part comes in. It includes the code that runs on the server and is not visible to the user.
- 6. Timeline ● Why learn web dev? ● Web Dev - Frontend ● Web Dev - Backend ● Databases ● Intro to APIs, JSON ● IDE’s and Environment
- 7. Web Dev - Frontend
- 9. HTML
- 10. CSS
- 11. CSS
- 12. Javascrip t
- 13. JS ● Logic in Web Apps ● Javascript != Java ● Libraries - JQuery, NodeJS, ReactJS ● JSON - JavaScript Object Notation
- 14. JS ● console.log ● alert ● document.write
- 15. ReactJS
- 16. ReactJS ● A JavaScript library for building User Interfaces. ● ReactJS is not a JS framework. ● It is also known as React or React.js
- 17. ReactJS - History ● Designed by Jordan Walke, a Software Engineer at Facebook. ● First deployed on Facebook News Feed on 2011. ● In 2013, React was open sourced at JS conference.
- 18. ReactJS - Features ● Component based approach. ● Reusability ● Modularity ● DOM updates are handled gracefully. ● Speed ● Scalability ● Huge Community
- 19. Timeline ● Why learn web dev? ● Web Dev - Frontend ● Web Dev - Backend ● Databases ● Intro to APIs, JSON ● IDE’s and Environment
- 20. Web Dev - Backend
- 21. NodeJS ● Node.js is a JavaScript runtime built on the Chrome V8 JavaScript Engine for executing JS Scripts. ● Node.js is neither a language nor a framework. ● It is written in C++ to run JS code on the server.
- 22. JS - Script for Browser
- 23. Question was How to run JS Scripts in Server Side?
- 24. Birth of Node.js
- 25. Why Node.js? ● Server Side Development. ● Creating Web Servers, Business logic and providing Database Access. ● Node.js runs a single threaded, non-blocking and asynchronous programming which makes it very memory efficient. ● Huge Community for MERN.
- 26. PHP
- 27. PHP ● Xampp ● Works with My SQL DB. ● phpMyAdmin
- 28. Timeline ● Why learn web dev? ● Web Dev - Frontend ● Web Dev - Backend ● Databases ● Intro to APIs, JSON ● IDE’s and Environment
- 29. Database
- 30. Timeline ● Why learn web dev? ● Basics of HTML, CSS, JS ● Chrome Dev Tools ● Caesar Cipher ● Intro to APIs, JSON ● IDE’s and Environment
- 31. APIs
- 32. APIs ● Application programming interface ● Defines how software communicates ● GET(easy) - POST(secure)
- 33. APIs - JSON Dictionary Of Data
- 34. Timeline ● Why learn web dev? ● Basics of HTML, CSS, JS ● Chrome Dev Tools ● Caesar Cipher ● Intro to APIs, JSON ● IDE’s and Environment
- 35. ● VS Code/ Sublime ● Postman IDEs
- 36. Timeline ● Why learn web dev? ● Basics of HTML, CSS, JS ● Chrome Dev Tools ● Caesar Cipher ● Intro to APIs, JSON ● IDE’s and Environment
- 37. ● Develop Websites/ Apps ● Collaborate in startups ● Take online courses ● Google!! Key Takeaways