Презентация

JS Tools and Libraries - JS Applications - ноември 2016

 

Материали от темата

Съдържание на документа

JS Tools and Libraries

Build Tools,

ESLint, ElectronJS, Lodash

SoftUni Team

Technical Trainers

Software University

http://softuni.bg

JS Tools


Table of Contents

Build Tools

Lodash

ESLint

Electron.js





2


3



sli.do
#js-tools

Have a Question?


4

Why Automate?

JavaScript does not need to be compiled

…Right?


5

Modern Development Process

Write

Lint

Transpile

Bundle

Minify

Deploy











Optimize and Start over


6

Build tools help us with the build process of our application

Prepare scripts for web (minify/uglify/concat)

Run Unit Tests 

Deploy to Git, Cloud etc…

Famous tools are

Grunt

Gulp

Webpack



Build tools


Grunt

JS Task Runner

7


8

Grunt can be used for various file operations from merging two or more files into one to shortening javascript/css code

Installing

First install the Grunt command line interpreter (CLI)



Than the Grunt itself



You may later download additional plugins





Grunt

npm install grunt-cli -g

npm install grunt --save-dev


Demo

Bundle up Files with Grunt

9


Gulp

Automate Workflow

10


11

Gulp is basically same as Grunt but simpler and faster

Installing

First install the Gulp CLI



Than the Gulp itself



You may download additional plugins in order to minify/concat files (same as “Grunt”)

Gulp

npm install gulp-cli -g

npm install gulp --save-dev


Demo

Bundle up Files with Gulp

12


Webpack

A Wicked Smart Module Bundler

13


One of the newest tools, combining build steps and bundling

Supports dependency management

Can load any 3rd party library as a module

Comes with it's own development server

Code splitting and loading as needed

14

What is Webpack?











Bundle


15

Webpack Build Process



CSS



CSS



CSS



JS



JS



JS



JS



JS



JS

JS modules with dependencies

Stylesheets

Images and other assets



CSS



CSS



CSS



☰



☰



☰



☰





Bundle







JS



CSS



☰







Deployment




16

Install Webpack via npm

Install the add-on development server

Run from the terminal

Installation and CLI

npm install webpack -g

npm install webpack-dev-server -g

webpack ./app.js bundle.js


17

Create a webpack.config.js file to automate your build

Configuration is in JSON format

When running webpack from the terminal, it uses this config

Automation with Config Files

module.exports = {

  entry: "./entry.js",

  output: {

    filename: "bundle.js"

  }

};





Starting module

Final output file


18

Run the development server from the terminal

Webpack can watch for file changes and rebuild the bundle

Add argument or change your config file to enable hot reloading

Web Server and Watch Mode

webpack-dev-server

module.exports = {

  entry: … , output: … ,

  watch: true

};

webpack --watch


19

Loaders apply transformations to files

Can be downloaded with npm and configured in the main config

Preloaders are the same, they just run before any loaders

Processing Files with Loaders and Preloaders

module.exports = {

  entry: "./entry.js",

  output: {filename: "bundle.js"},

  module: {

    loaders: [ … ]

  }

};

{

  test: /\.jsx$/,

  exclude: /node_modules/,

  loader: "babel-loader"

}

Loader format




20

Webpack uses npm scripts for further automation

Add to your package.json file

To minify the bundle for deploy, run webpack with –p argument

You can specify a different config file for production

Scripts and Production Build

scripts: {

  "start": "webpack-dev-server"

};

webpack --config webpack-production.config.js -p


Live Demo

Automated build with WebPack

21


Lodash

High-Performance Object Operations


23

Utility library that extends working

   with objects, arrays etc.









Main goal is performance.

Reduces boilerplate and inconsistent code.







Lodash



let _ = require('lodash');



_.findLast([1, 2, 3, 4], (n) => {

  return n % 2 === 0

}) // 4


24

Example – Random Number

// Naive utility method 

function getRandomNumber(min, max){

 return 

   Math.floor(Math.random() * (max - min + 1)) + min;

 }

getRandomNumber(15, 20);

let _ = require('lodash');



_.random(15, 20);

VS


25

Example – Removing Property

Object.prototype.remove = function(arr) { 

  let that = this; 

  arr.forEach((key) => delete(that[key])); 

}; 

let objA = {"name": "Pesho", "car": "ford", "age": 23}; objA.remove(['car', 'age']); // {"name": "Pesho"}

let _ = require('lodash');



objA = _.omit(objA, ['car', 'age']); // {"name": "Pesho"}

VS


26

Example – Deep Cloning

let objA = { "name": "Stamat" }; 

// Normal method? Too long. 

// You can try with JSON.stringify(JSON.parse(objA)).

// But it won't include methods.

let _ = require('lodash');



let objB = _.cloneDeep(objA);

 objB === objA // false

VS


ESLint

Pluggable Linting

27


28

ESLint is a tool which keeps track of code for inconsistent content (typos, formatting etc)

Main purpose is to reduce  bugs and make the code more readable

It's done by following rules which can be configured

ESLint

{ 

  "rules": { 

    "semi": ["error", "always"], 

    "quotes": ["error", "double"] }

}


Demo

Configuring ESLint

29


Electron.js

Javascript Framework for Desktop apps

30


31

Оpen-source framework developed by GitHub

You can build desktop applications using the Node.js runtime and the Chromium web browser

For the view rendering you can use the very same HTML and CSS you already use in the web browser

Apps made with Electron.js

VS Code

Postman

Atom

Electron.js


Demo

Deploy our Web App as Desktop App

32



www


33

Webpack/Grunt/Gulp tools help with the deployment process of our application.

Lodash is fast and reliable library which extends how we can work with objects, arrays etc.

ESLint helps you follow the best practices for writing good code.

Electron.js gives the functionality to create desktop app using Javascript









Summary


https://softuni.bg/courses/javascript-applications

JS Tools and Libraries


License

This course (slides, examples, demos, videos, homework, etc.)
is licensed under the "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International" license

35


Free Trainings @ Software University

Software University Foundation – softuni.org

Software University – High-Quality Education, Profession and Job for Software Developers

softuni.bg 

	Software University @ Facebook

	facebook.com/SoftwareUniversity

	Software University @ YouTube

	youtube.com/SoftwareUniversity

	Software University Forums – forum.softuni.bg