Slide 1

Slide 1 text

Introduction to Web Development Software Developer, Newlogic Arnelle Balane @arnellebalane

Slide 2

Slide 2 text

Arnelle Balane Tech Lead @ Newlogic Google Developers Expert for Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Please subscribe to our channel! bit.ly/uncaughtxcptn

Slide 3

Slide 3 text

● Introduce different areas of Web development ● Help you pick your path This talk aims to

Slide 4

Slide 4 text

● 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?

Slide 5

Slide 5 text

● Frontend ● Backend ● Full Stack What do you want to do?

Slide 6

Slide 6 text

● 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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Makes CSS more efficient and adds more functionality to standard CSS ● SASS/SCSS ● Stylus ● LESS CSS Preprocessors

Slide 10

Slide 10 text

Great for prototyping or when we are not great with design ● Bootstrap ● Materialize ● Tailwind CSS CSS Frameworks

Slide 11

Slide 11 text

Make it easy to maintain CSS ● Block, Element, Modifier (BEM) ● Object-Oriented CSS (OOCSS) ● Scalable and Modular Architecture for CSS (SMACSS) CSS Methodologies

Slide 12

Slide 12 text

It is the programming language of the browser, and important to make pages dynamic ● Fundamentals ● DOM ● JSON Vanilla JavaScript ● Fetch API ● Modern JavaScript (ES2015+)

Slide 13

Slide 13 text

JavaScript Libraries ● jQuery, Zepto ● Module loaders : RequireJS, SystemJS ● Templating : Handlebars, EJS, Mustache.js, Pug

Slide 14

Slide 14 text

● Code Minification ● Image Compression ● Lazy loading Optimizations

Slide 15

Slide 15 text

● Git & GitHub, GitLab, Bitbucket ● Browser Dev Tools ● Package managers: npm, yarn ● Task runners : gulp, grunt ● Module bundlers: webpack, parcel, rollup Tools

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

● 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

Slide 18

Slide 18 text

● Frontend JavaScript Framework (React, Vue, Angular, etc.) ● Server-Side Language (Python, Ruby, PHP, etc.) What’s next?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

State Management ● Vue : vuex ● React : Redux, Context API with Hooks ● Angular : NGRX, Services

Slide 21

Slide 21 text

● Nuxt.js ● Next.js ● Angular Universal Server-Side Rendering ● Better SEO ● File System Routing ● Automatic Code Splitting ● Static Exporting

Slide 22

Slide 22 text

● Gatsby.js, Next.js ● Nuxt.js, Gridsome, VuePress ● Scully ● Eleventy, Hugo Static Site Generators ● Better SEO ● File System Routing ● Data fetching during build time

Slide 23

Slide 23 text

TypeScript ● Superset of JavaScript ● Static Types ● Modules, Decorators, Classes ● Compiles into JavaScript code

Slide 24

Slide 24 text

● 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

Slide 25

Slide 25 text

The Great Divide css-tricks.com/the-great-divide

Slide 26

Slide 26 text

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#

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Most apps need a place to store data ● Relational Databases : PostgreSQL, MySQL ● NoSQL : MongoDB, CouchDB ● Cloud Databases : Cloud Firestore ● Lightweight & Cache : Redis, SQLite Databases

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

● 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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

● Web and mobile app development platform ● Backend as a Service ● Authentication, Database, Storage, Functions, Notifications, etc. Firebase

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Thank you! UncaughtException @uncaughtxcptn Arnelle Balane @arnellebalane Introduction to Web Development