Introduction to Web Development

1. Introduction to Web Development Software Developer, Newlogic Arnelle Balane @arnellebalane
2. Arnelle Balane Tech Lead @ Newlogic Google Developers Expert for Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Please subscribe to our channel! bit.ly/uncaughtxcptn
3. • Introduce different areas of Web development • Help you pick your path This talk aims to
4. • Work as a developer at a company • Start freelancing or create your own agency • Become a consultant • Create an app to make money • Code as a hobby What do you want to do?
5. • Frontend • Backend • Full Stack What do you want to do?
6. • OS : macOS, Linux, Windows • Text Editor : VSCode, Sublime Text, PyCharm • Browser : Chrome, Firefox, Safari • Terminal : iTerm, Hyper, cmder, Git Bash • Design : Figma, Sketch, Adobe XD Tools
7. HTML & CSS are almost always the first things that you’re going to learn in Web development • HTML5 • CSS Fundamentals • CSS Grid & Flexbox The Building Blocks • CSS Custom Properties • CSS Transitions
8. Most people use the Internet on their mobile devices, so creating responsive layouts is important • Viewport • Media Queries Responsive Design • Fluid Widths • Mobile-First Design
9. Makes CSS more efficient and adds more functionality to standard CSS • SASS/SCSS • Stylus • LESS CSS Preprocessors
10. Great for prototyping or when we are not great with design • Bootstrap • Materialize • Tailwind CSS CSS Frameworks
11. Make it easy to maintain CSS • Block, Element, Modifier (BEM) • Object-Oriented CSS (OOCSS) • Scalable and Modular Architecture for CSS (SMACSS) CSS Methodologies
12. It is the programming language of the browser, and important to make pages dynamic • Fundamentals • DOM • JSON Vanilla JavaScript • Fetch API • Modern JavaScript (ES2015+)
13. JavaScript Libraries • jQuery, Zepto • Module loaders : RequireJS, SystemJS • Templating : Handlebars, EJS, Mustache.js, Pug
14. • Code Minification • Image Compression • Lazy loading Optimizations
15. • Git & GitHub, GitLab, Bitbucket • Browser Dev Tools • Package managers: npm, yarn • Task runners : gulp, grunt • Module bundlers: webpack, parcel, rollup Tools
16. Get our website into a Web server and to our users • Static Hosting: Netlify, GitHub Pages, Firebase Hosting • Domains: Namecheap, Google Domains, GoDaddy • SSL Certificates Frontend Deployment
17. • Build websites for yourself or other people • Create mobile friendly layouts • Create CSS animations and effects • Work with a CSS framework • Add dynamic page functionalities • Build client side apps with JavaScript and JS libraries • Use your browser’s dev tools • Utilize Git for version control • Deploy and maintain frontend projects Frontend Developer
18. • Frontend JavaScript Framework (React, Vue, Angular, etc.) • Server-Side Language (Python, Ruby, PHP, etc.) What’s next?
19. Frontend Frameworks Build powerful single-page applications with organized and interactive UIs Vue : Easiest to learn, really gaining traction React : Fairly easy to learn, still the most popular Angular : Steep learning curve, used more in enterprise
20. State Management • Vue : vuex • React : Redux, Context API with Hooks • Angular : NGRX, Services
21. • Nuxt.js • Next.js • Angular Universal Server-Side Rendering • Better SEO • File System Routing • Automatic Code Splitting • Static Exporting
22. • Gatsby.js, Next.js • Nuxt.js, Gridsome, VuePress • Scully • Eleventy, Hugo Static Site Generators • Better SEO • File System Routing • Data fetching during build time
23. TypeScript • Superset of JavaScript • Static Types • Modules, Decorators, Classes • Compiles into JavaScript code
24. • Familiar with a popular frontend framework • Build advanced frontend apps and interfaces • Smooth frontend workflow • Interact with backend APIs and data • Manage application and component-level state • Bonus: server-side rendering (SSR), static site generation (SSG) Frontend Developer
25. The Great Divide css-tricks.com/the-great-divide
26. Server-Side Language To be a full stack or backend developer, you will need to learn a server-side programming language • Node.js • Python • PHP • Ruby • Go • Rust • Java • C#
27. Server-Side Frameworks • Node.js : Express, Koa, Feathers.js • Python : Django, Flask • PHP : Laravel, Symfony • Ruby : Ruby on Rails • Java : Spring MVC • C# : ASP.NET
28. Most apps need a place to store data • Relational Databases : PostgreSQL, MySQL • NoSQL : MongoDB, CouchDB • Cloud Databases : Cloud Firestore • Lightweight & Cache : Redis, SQLite Databases
29. Standard way for our frontend and backend to communicate with each other • Verb + location • GET /users • POST /users REST API • GET /users/:id • PUT /users/:id • DELETE /users/:id
30. Query language for our API, alternative to REST • Single endpoint • We ask for what we want, and we get that exact data • Simple syntax, similar to JSON • Fairly easy to implement, has implementations in different programming languages GraphQL
31. Add content to our apps, great for clients to be able to update their own content • Traditional CMS : Wordpress, Drupal • Headless CMS : Strapi, Contentful, Sanity, Prismic.io Content Management
32. Deployment & DevOps • App hosting : DigitalOcean, Linode, Heroku, AWS, Google Cloud Platform • Web servers : Caddy, Nginx, Apache • Virtualization : Docker • SSH (Secure Shell) • Load balancing, monitoring, security, etc.
33. • Create and deploy powerful, database-driven Web apps • Build user interfaces using your choice of frontend technologies • Fluent in a server-side programming language • Setup dev environments and workflows • Build backend apps and APIs • Work with databases (relational or NoSQL) • Deploy to production Full Stack Developer
34. Regular Web apps but with a native native feel in terms of experience, layout, and functionality • Responsive • Offline content • Installable Progressive Web Apps • Splash screen • Secure (over HTTPS) • Reliable, fast, and engaging
35. JAMstack • JavaScript + APIs + Markup • No restriction on frameworks on libraries • Websites are served as static HTML files generated by static site generators • High performance, generated at deploy time • Cheaper and easy to host and scale
36. • Web and mobile app development platform • Backend as a Service • Authentication, Database, Storage, Functions, Notifications, etc. Firebase
37. Phew! • Don’t get overwhelmed • Figure out what exactly you want to do • Learn one thing at a time • The more you learn, the easier it is to learn more and fit all these technologies together
38. Thank you! UncaughtException @uncaughtxcptn Arnelle Balane @arnellebalane Introduction to Web Development