Modern Frontend Web Development

A look at how the Javascript "buzz words" - webpack, babel, npm, yarn - come together to create powerful web applications

Transcript

1. Modern Frontend Web Development A look at how the more common javascript buzz words fit together - Wisdom Arerosuoghene
2. One moment, let me tell you about me… I’m Wisdom Arerosuoghene Widestack Developer. I code for... The web (fullstack) Android iOS Windows Desktop and Windows Phone Find me on github, medium, twitter and facebook - @itswisdomagain
3. Overview Once upon a time, designing front-end web applications required just combining HTML, CSS, Javascript and maybe jQuery/Ajax. Today… Everyone is talking about npm, yarn, webpack, babel. What in God’s good name are these really?
4. Here’s the thing... 01 Javascript and web development in general has evolved. Greatly! Ever heard of ES6? Typescript? Ever used them? 02 Browsers are slow to catch up with these magnificent evolutions. We shouldn’t let them slow us down! 03 So here’s the thing: Stop living in yesterday and start coding in 2018 . Get acquainted with various tools that can help.
5. Some popular tools The next slides will discuss 3 sets of tools that will enable you to write better and more efficient Javascript codes in 2018 YOU READY??
6. Package Managers Keep External Javascript Libraries Organized Package managers like Bower, NPM and Yarn serve one purpose: Automate the process of downloading and upgrading libraries from a central repository
7. How to use NPM/Yarn First, install NPM or Yarn (visit their websites, don’t be lazy dhorr) Go to your project folder, open your terminal, and “initialize” the project using… npm init yarn init Find the name of the library you need and install the library from the command line using… npm install <package-name> --save yarn add <package-name>
8. Webpack BUNDLE your all your Javascript codes, including your libraries Webpack increases overall performance of your websites by combining all your Javascript codes, from all the different RELATED files into a single file. This reduces page load time and when used appropriately, eliminates unnecessary Javascript codes not needed for each page.
9. How to use Webpack First, install webpack using NPM. By now, you should have NPM installed on your PC, yeah? npm install webpack -g For each web page, create a corresponding Javascript file. Use the require keyword to include other needed Javascript files and libraries in this file. var jQuery = require(‘jQuery’) var myOtherJSFile = require(‘./path/to/file’) Do your thing, write your functions and declare your variables. Finally, BUNDLE using webpack. This will create a single JS file (the output file) by combining the codes from all the required files. webpack original-js-file.js output-js-file.js
10. Babel C’mon, man. Why art thou speaking ancient English when thou can speakest modern English? Browsers are slow to adopt new features of the Javascript language. How do you write code in modern Javascript when the browsers are still behind? Babel has you covered! Just write, Babel will transpile your modern language to an older language so that those dull browsers can understand what ya saying...
11. How to use Babel First, okay, this part may be scary, but it’ll turn out to be fun. Go, learn ES6. All the new and exciting features and master them by using them consistently. Okay, now install babel-core and her sisters - babel-preset-env (default babel configuration) and babel-loader (something to make babel work with webpack) npm install babel-core babel-preset-env babel-loader --save-dev Do your thing, write your functions and declare your variables using modern ES6 syntax and patterns. Babel + Webpack got you covered. As before, when done, bundle up... webpack original-js-file.js output-js-file.js
12. How they all fit... Package Managers Like NPM and Yarn to keep external libraries organized Babel Be a ninja! Speak modern Javascript without fear. Works with Webpack --> Code in Action Include your bundled js file in your html file and see your code come to life Webpack Combine JS codes from different “modules” (libraries) and your own code into one single js file 01 02 03 04
13. Thank you! Learn more bit.ly/modern-js-explained