Da pré-história à atualidade no ecossistema

https://goo.gl/gDgBc6

@dayanyrec

Tudo começou...

... em 2007

Feature:

Como usuária, eu quero fornecer meu nome e ver a mensagem "Olá, <meu nome>!" na tela. Caso nenhum nome seja inserido, quero ver a mensagem "Olá, pessoa!".

Feature:

Como usuária, eu quero fornecer meu nome e ver a mensagem "Olá, <meu nome>!" na tela. Caso nenhum nome seja inserido, quero ver a mensagem "Olá, pessoa!".
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Ecossistema JS</title>
  </head>
  <body>
    <h1>Olá, <span>Pessoa</span>!</h1>
    <script type="text/javascript">
      var name = prompt("Digite seu nome");
      var nameElement = document.querySelector("span");
      nameElement.innerHTML = name;
    </script>
  </body>
</html>

Massa!

Mas não funcionou no IE :@

2007

Feature:

Como usuária, eu quero fornecer meu nome e ver a mensagem "Olá, <meu nome>!" na tela. Caso nenhum nome seja inserido, quero ver a mensagem "Olá, pessoa!". Garantindo que funcione no IE. 
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Ecossistema JS</title>
  </head>
  <body>
    <h1>Olá, <span>Pessoa</span>!</h1>
    <script src="jquery-latest.pack.js" charset="utf-8"></script>
    <script type="text/javascript">
      var name = prompt("Digite seu nome");

      $("span").html(name);
    </script>
  </body>
</html>

A ideia parece ótima mas podia ter uma maneira melhor de buscar, gerenciar e compartilhar código...

2010

2018 - https://www.npmjs.com/

2018 - https://docs.npmjs.com/getting-started/what-is-npm

2013

2018 - https://bower.io/

2016

2018 - https://yarnpkg.com/pt-BR/

Feature:

Como usuária, eu quero fornecer meu nome e ver a mensagem "Olá, <meu nome>!" na tela. Caso nenhum nome seja inserido, quero ver a mensagem "Olá, pessoa!". Garantindo que funcione no IE. 
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Ecossistema JS</title>
  </head>
  <body>
    <h1>Olá, <span>Pessoa</span>!</h1>
    <script src="jquery-latest.pack.js" charset="utf-8"></script>
    <script type="text/javascript">
      var name = prompt("Digite seu nome");

      $("span").html(name);
    </script>
  </body>
</html>

# no diretório do projeto
$ npm init -y

Wrote to /lab/ecossistema-js/package.json:

{
  "name": "ecossistema-js",
  "version": "1.0.0",
  "description": "",
  "main": "jquery-latest.pack.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Usando npm para gerenciamento de dependências

$ npm install jquery --save

$ ls node_modules/
jquery

$ cat .gitignore
node_modules

$ git diff

diff --git a/package.json b/package.json
index aab9f1a..4b8c369 100644
--- a/package.json
+++ b/package.json
@@ -8,5 +8,8 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "jquery": "^3.3.1"
+  }
 }
diff --git a/index.html b/index.html
index c43a754..4e34999 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   </head>
   <body>
     <h1>Olá, <span>Pessoa</span>!</h1>
-    <script src="jquery-latest.pack.js" charset="utf-8"></script>
+    <script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
     <script type="text/javascript">
       var name = prompt("Digite seu nome");
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Ecossistema JS</title>
  </head>
  <body>
    <h1>Olá, <span>Pessoa</span>!</h1>
    <script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      var name = prompt("Digite seu nome");

      $("span").html(name);
    </script>
  </body>
</html>

Usando npm

Seria bom minificar nosso código pra ajudar na performance, né!?

2012

2018 - https://gruntjs.com/

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Ecossistema JS</title>
  </head>
  <body>
    <h1>Olá, <span>Pessoa</span>!</h1>
    <script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      var name = prompt("Digite seu nome");

      $("span").html(name);
    </script>
  </body>
</html>

Usando Grunt para minificação

$ cat index.html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Ecossistema JS</title>
  </head>
  <body>
    <h1>Olá, <span>Pessoa</span>!</h1>
    <script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script src="index.js" charset="utf-8"></script>
  </body>
</html>

Separando nosso JS em um arquivo

// index.js
var name = prompt("Digite seu nome");

$("span").html(name);
$ npm install -g grunt-cli

$ npm install grunt --save-dev

$ npm install grunt-contrib-uglify --save-dev

Usando Grunt para minificação

// Gruntfile.js
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    uglify: {
      build: {
        src: 'index.js',
        dest: 'index.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};
$ grunt
Running "uglify:build" (uglify) task
>> 1 file created 61 B → 56 B

Usando Grunt para minificação

$ cat index.html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Ecossistema JS</title>
  </head>
  <body>
    <h1>Olá, <span>Pessoa</span>!</h1>
    <script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script src="index.min.js" charset="utf-8"></script>
  </body>
</html>
// index.js
var name = prompt("Digite seu nome");

$("span").html(name);


// index.min.js
var name=prompt("Digite seu nome");$("span").html(name);
$ npm install grunt-contrib-concat --save-dev

Usando Grunt para concatenação

// Gruntfile.js
module.exports = function(grunt) {
...
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['node_modules/jquery/dist/jquery.min.js', 'index.min.js'],
        dest: 'built.js',
      },
    }
...
    grunt.registerTask('default', ['uglify', 'concat']);
};
$ grunt
Running "uglify:build" (uglify) task
>> 1 file created 61 B → 56 B

Running "concat:dist" (concat) task

Done.

Usando Grunt para concatenação

$ cat index.html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Ecossistema JS</title>
  </head>
  <body>
    <h1>Olá, <span>Pessoa</span>!</h1>
    <script src="built.js" charset="utf-8"></script>
  </body>
</html>

Bom, bom... mas precisamos mesmo desse caminho estranho de node_modules dentro do Gruntfile? Fica difícil saber disso olhando só o HTML.

2013

2018 - https://webpack.js.org/guides/getting-started/

Problemas:

  • Dependência de uma lib externa não fica explícita

  • Ao esquecer uma dependência ou inserir na order errada quebra a app.

  • Código desnecessário pode ser baixado se uma dependência for incluída mas não usada.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Ecossistema JS</title>
  </head>
  <body>
    <h1>Olá, <span>Pessoa</span>!</h1>
    <script src="built.js" charset="utf-8"></script>
  </body>
</html>
$ npm install webpack webpack-cli --save-dev
// index.js
 var $ = require("jquery");

 var name = prompt("Digite seu nome");

 $("span").html(name);
$ ./node_modules/.bin/webpack index.js --output bundle.js
$ git diff index.html
diff --git a/index.html b/index.html
index 97df347..ca5bd42 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,6 @@
   </head>
   <body>
     <h1>Olá, <span>Pessoa</span>!</h1>
-    <script src="built.js" charset="utf-8"></script>
+    <script src="bundle.js" charset="utf-8"></script>
   </body>
 </html>

$ rm Gruntfile.js

Bunito :D

...mas e as "novidades" de ES2015, 16, 17, 18?

2015

2018 - https://babeljs.io/

// index.js
var $ = require("jquery");

var name = prompt("Digite seu nome");

$("span").html(name);

// index.js
import $ from "jquery";
import User from "./user.js";

const name = prompt("Digite seu nome");

let user = new User(name);

$("span").html(`${user.name}. Parabéns pelos seus ${user.age} de vida`);

Podemos ter uma classe para usuária

// user.js
export default class User {
  constructor(name="Pessoa", age=63) {
    this.name = name;
    this.age = age;
  }
}
$ npm install --save-dev babel-loader babel-core
$ cat webpack.config.js
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
};
$ npm install babel-preset-env --save-dev
$ cat .babelrc
{
  "presets": ["env"]
}
$ ./node_modules/.bin/webpack
Hash: a0e060bb2bd3cc089b1c
Version: webpack 4.12.0
Time: 2957ms
Built at: 06/09/2018 3:30:53 AM
    Asset      Size  Chunks             Chunk Names
bundle.js  86.6 KiB       0  [emitted]  main
[0] ./user.js 538 bytes {0} [built]
[2] ./index.js 452 bytes {0} [built]
    + 1 hidden module

Digitar essa linha de comando com webpack toda hora tá chato. Pode ser mais bacana!

$ ./node_modules/.bin/webpack

$ cat package.json
...
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...
$ npm run build

gerenciador de dependências

empacotador

compilador

Repositório da "aplicação"

https://goo.gl/onZ3Zs

http://insideoutproject.xyz/mulheres-palestrantes/

ThoughtWorks

Obrigada

:D

Referências

Referências

ecossistema-JS

By dayanyrec

Made with Slides.com

ecossistema-JS

  • 1,692