Как написать простые современные приложения JavaScript с WebPack и прогрессирующими веб-методами

Anurag Mjumdar

Вы думали, что создание современных приложений JavaScript с простейшей установкой возможна для вашего следующего проекта?

Если это так, вы пришли на правильное место!

Существуют JavaScript Frameworks, чтобы помочь нам создавать приложения в обобщенном способе с большинством общих функций. Но большинство приложений могут не понадобиться все мощные функции структуры. Это может быть излишне, чтобы просто использовать рамки для конкретных требований (особенно маленьких и средних проектов).

Сегодня я собираюсь показать подход к тому, как вы можете использовать современные функции и создать собственные индивидуальные веб-приложения. Вы также можете создать свои собственные рамки сверху примерных приложений, если хотите. Это чисто необязательно. Сила Vanilla JavaScript позволяет нам следовать нашему собственному стилю кодирования независимо от используемых инструментов.

Что нам нужно

Прежде чем начать, позвольте нам быстро пролить функции, которые нам нужны.

Архитектурное планирование

Чтобы обеспечить быструю загрузку и последовательный опыт, мы будем использовать следующие шаблоны:

Архитектура оболочки приложения
Prpl ( p ush, r ender, P повторный кэш, Л yzy loading) шаблон

Настройка сборки

Нам нужна хорошая настраиваемая настройка сборки, поэтому мы будем использовать WebPack со следующими требованиями:

Поддержка ES6 & Dynamic Imports
Поддержка Sass & CSS
Пользовательские разработки и настройки производства
Пользовательский сервисный работник

Голые минимальные функции JavaScript

Мы будем прикасаться к минимальным функциям JavaScript, чтобы получить нас от земли и произвести выход, который нам требуется. Я покажу вам, как мы можем использовать существующие функции JavaScript ES6 в наших повседневных приложениях Vanilla. Они здесь:

Модули ES6
Динамический импорт
Объект буквальный синтаксис или синтаксис класса ES6
ES6 Arrow Функции
ES6 шаблон литералов

В конце этой статьи есть демонстрация образца приложения вместе с его исходным кодом на Github. Давайте копать глубже, будем ли мы? ?

Архитектурное планирование

Появление Прогрессивные веб-приложения помог принести новые архитектуры, чтобы сделать нашу первую краску более эффективной. Объединение Приложение Shell. и PRPL Узоры могут привести к последовательной отзывчивости и приложением опыта.

Что такое приложение Shell & PrPL?

Приложение Shell архитектурный узор для строительства Прогрессивные веб-приложения где вы отправляете минимальный Критические ресурсы Для того, чтобы загрузить свой сайт. Это в основном состоит из всех необходимых ресурсов для первой краски. Вы можете кэшировать критические ресурсы, а также используя сервисный работник.

PRPL относится к следующему:

P Критические ресурсы USH (особенно с использованием http/2) для начального маршрута.
R Уплотком первоначального маршрута.
P Повторное кеш оставшиеся маршруты или активы.
Л Удачные части нагрузки приложения как и при необходимости (особенно при необходимости пользователя).

Как выглядят эти архитектуры в коде?

Приложение Shell и PRPL Узор оба используются вместе для достижения лучших практик.

Приложение Shell выглядит несколько, как следующий кусок кода:






    
    
    
    
    
    Vanilla Todos PWA




    
        
        
             Vanilla Todos PWA 
        
        
        
            © 2019 Anurag Majumdar - Vanilla Todos SPA

Вы можете видеть, что приложение Shell состоит из голых минимальных разметков как скелета.

Линии 9-82 : Критические стили были введены в разметку, чтобы обеспечить прямое распределение CSS вместо того, чтобы соединить его в другой файл.

Линии 89-96 : Максимальная разметка оболочки приложения; Эти области будут позже манипулировать JavaScript (особенно содержимым внутри основного тега линии 93).

Линия 99 : Именно здесь скрипты вступают в игру. async Атрибут помогает не блокировать парсер, пока сценарии загружаются.

Приложение Shell также включает в себя Толчок & Оказывать Этапы PR PL Pattern. Это происходит, когда HTML проанализируется браузером для формирования пикселей на экране. Он легко находит все критические ресурсы. Кроме того, Критические скрипты несут ответственность за показ Начальный маршрут от DOM Manipulatulation ( Оказывать ).

Однако, если мы не используем сервисный работник для кэширования оболочки, это не будет никакого использования для будущих перезагрузок и преимуществ производительности.

Следующий фрагмент кода показывает сервисный работник, который кэширует оболочку и все статические активы, необходимые для приложения.

var staticAssetsCacheName = 'todo-assets-v3';
var dynamicCacheName = 'todo-dynamic-v3';

self.addEventListener('install', function (event) {
    self.skipWaiting();
    event.waitUntil(
      caches.open(staticAssetsCacheName).then(function (cache) {
        cache.addAll([
            '/',
            "chunks/todo.d41d8cd98f00b204e980.js","index.html","main.d41d8cd98f00b204e980.js"
        ]
        );
      }).catch((error) => {
        console.log('Error caching static assets:', error);
      })
    );
  });

  self.addEventListener('activate', function (event) {
    if (self.clients && clients.claim) {
      clients.claim();
    }
    event.waitUntil(
      caches.keys().then(function (cacheNames) {
        return Promise.all(
          cacheNames.filter(function (cacheName) {
            return (cacheName.startsWith('todo-')) && cacheName !== staticAssetsCacheName;
          })
          .map(function (cacheName) {
            return caches.delete(cacheName);
          })
        ).catch((error) => {
            console.log('Some error occurred while removing existing cache:', error);
        });
      }).catch((error) => {
        console.log('Some error occurred while removing existing cache:', error);
    }));
  });

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request)
          .then((fetchResponse) => {
              return cacheDynamicRequestData(dynamicCacheName, event.request.url, fetchResponse.clone());
          }).catch((error) => {
            console.log(error);
          });
      }).catch((error) => {
        console.log(error);
      })
    );
  });

  function cacheDynamicRequestData(dynamicCacheName, url, fetchResponse) {
    return caches.open(dynamicCacheName)
      .then((cache) => {
        cache.put(url, fetchResponse.clone());
        return fetchResponse;
      }).catch((error) => {
        console.log(error);
      });
  }

Линии 4-17 : Установленное событие обслуживающих работников помогает кэшировать все статические активы. Здесь вы можете кэшировать ресурсы приложения Shell (CSS, JavaScript, изображения и т. Д.) Для первого маршрута (согласно Shell app). Кроме того, вы можете кэшировать оставшуюся часть активов приложения, обеспечивающее все приложение, которое может работать в автономном режиме. Это кеширование статических активов, кроме основной приложения Shell обеспечивает Предварительный кэш этап PR P L Узор.

Линии 19-38: Событие Activate – это место для уборки неиспользованных кэшей.

Линии 40-63 : Эти строки кода помогают привлечь ресурсы из кэша, если они находятся в кэше или переходят в сеть. Кроме того, если создан сетевой вызов, то ресурс не находится в кэше и ввести в новый отдельный кэш. Этот сценарий помогает кэшировать все динамические данные для приложения.

В целом большинство частей архитектуры были покрыты. Единственная оставленная часть – это Ленивая загрузка Этап PRP Л шаблон. Я буду обсуждать это в отношении JavaScript.

Наша настройка сборки

Что такое хорошая архитектурная структура без настройки сборки? WebPack к спасению. Есть другие инструменты, такие как посылка, свернуты и т. Д., Но все, что мы применимы к WebPack, могут быть применены к любому такому инструменту.

Я буду сопоставлять концепции, используемые для плагинов, чтобы вы могли получить базы, используемые для настройки рабочего процесса. Это самый важный шаг для начала работы с хорошей многоразовой сборкой сборки для вашего собственного приложения на будущее.

Я знаю, насколько сложно разработчики, как мы, чтобы настроить WebPack или любой инструмент для этого вопроса с нуля. Следующая статья была вдохновением, которое помогло мне создать собственную настройку сборки:

Сказка о WebPack 4 и как наконец настроить его правильно. Обновлено.

Обратитесь к вышеуказанной ссылке, если вы застряли в любом месте с настройкой сборки. Давайте давайте проверим концепции, необходимые для сборки.

Поддержка ES6 & Dynamic Imports

Бабел Это популярный транспортер, который должен помочь нам с транспилонским функциями ES6 до ES5. Нам понадобится следующие пакеты, чтобы включить Вавилон, работающую с WebPack:

@ Babel/Core
@ Babel/Plugin-синтаксис-динамический импорт
@ babel/preset-env
ядро
Babel-Loader
предустановка бабел

Вот образец Babelrc для справки:

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Во время настройки Babel нам нужно кормить следующее 2-я строка в пресетах, чтобы дать Бабела, чтобы транпировать ES6 до ES5 и 3-я линия в Плагины для включения динамической импортной поддержки с помощью WebPack.

Вот как Babel используется с WebPack:

module.exports = {
    entry: {
        // Mention Entry File
    },
    output: {
        // Mention Output Filenames
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        // Plugins
    ]
};

Линии 10-17 : Babel Loader используется для создания процесса трансимации Babel в WebPack.config.js. Для простоты другие части конфигурации были устранены или прокомментированы.

Поддержка Sass & CSS

Для настройки SASS и CSS вам нужны следующие пакеты:

Sass-Loader.
CSS-Loader.
Стиль-погрузчик
Minicssextractplugin.

Вот как конфигурация выглядит как:

module.exports = {
    entry: {
        // Mention Entry File
    },
    output: {
        // Mention Output Filenames
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
    ]
};

Линии 17-25 : Это область, где загрузки загрузки.

Линии 29-31 : Поскольку мы используем плагин для извлечения файла CSS, мы используем Minicssextractplugin здесь.

Пользовательские разработки и настройки производства

Это самый важный раздел процесса сборки. Все мы знаем, что нам нужна настройка разработки и производства для разработки приложений, а также развертывание окончательного распределения в Интернете.

Вот пакеты, которые будут использоваться:

Clean-WebPack-Plugin : Для очистки содержимого папки Dist.
Сжатие – WebPack-Plugin : Для Gzipping The Dist папку содержимого файла.
Copy-WebPack-Plugin : Для копирования статических активов, файлов или ресурсов из источника приложения в Dist Folder.
html-webpack-plugin : Для создания файла index.html в папке dist.
webpack-md5-hash : Для хеширования исходных файлов приложения в папке Dist.
webpack-dev-server : Для запуска локального сервера развития.

Вот окончательный файл конфигурации WebPack:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = (env, argv) => ({
    entry: {
        main: './src/main.js'
    },
    devtool: argv.mode === 'production' ? false : 'source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
        chunkFilename:
            argv.mode === 'production'
                ? 'chunks/[name].[chunkhash].js'
                : 'chunks/[name].js',
        filename:
            argv.mode === 'production' ? '[name].[chunkhash].js' : '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin('dist', {}),
        new MiniCssExtractPlugin({
            filename:
                argv.mode === 'production'
                    ? '[name].[contenthash].css'
                    : '[name].css'
        }),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: './index.html',
            filename: 'index.html'
        }),
        new WebpackMd5Hash(),
        new CopyWebpackPlugin([
            // {
            //     from: './src/assets',
            //     to: './assets'
            // },
            // {
            //     from: 'manifest.json',
            //     to: 'manifest.json'
            // }
        ]),
        new CompressionPlugin({
            algorithm: 'gzip'
        })
    ],
    devServer: {
        contentBase: 'dist',
        watchContentBase: true,
        port: 1000
    }
});

Линии 9-77: Весь конфигурация WebPack – это функция, которая принимает два аргумента. Здесь я использовал Аргв I.E., аргументы отправляются при запуске команд WebPack или WebPack-Dev-Server.

На приведенном ниже изображении показаны секция скриптов в Package.json.

Соответственно, если мы запустим NPM запустить сборку Это будет вызвать производственную сборку, и если мы запустим NPM Run обслуживает Это будет вызвать поток развития с локальным сервером развития.

Линии 44-77 Эти строки показывают, как плагины и конфигурация сервера разработки необходимо установить.

Линии 59-66 : Эти линии являются любыми ресурсами или статическими активами, которые необходимо скопировать из источника приложения.

Пользовательский сервисный работник

Поскольку все мы все знаем, насколько утомительно писать имена всех файлов снова для кэширования, я сделал сценарий сборки пользовательских услуг для удержания файлов в Dist Папка, а затем добавляя их в виде содержимого кеша в шаблоне обслуживания работника. Наконец, файл сервисного работника будет написан на Dist папка.

Концепции, касающиеся файла обслуживания работника, мы говорили о том, будут одинаковыми. Вот сценарий в действии:

const glob = require('glob');
const fs = require('fs');

const dest = 'dist/sw.js';
const staticAssetsCacheName = 'todo-assets-v1';
const dynamicCacheName = 'todo-dynamic-v1';

let staticAssetsCacheFiles = glob
    .sync('dist/**/*')
    .map((path) => {
        return path.slice(5);
    })
    .filter((file) => {
        if (/\.gz$/.test(file)) return false;
        if (/sw\.js$/.test(file)) return false;
        if (!/\.+/.test(file)) return false;
        return true;
    });

const stringFileCachesArray = JSON.stringify(staticAssetsCacheFiles);

const serviceWorkerScript = `var staticAssetsCacheName = '${staticAssetsCacheName}';
var dynamicCacheName = '${dynamicCacheName}';
self.addEventListener('install', function (event) {
    self.skipWaiting();
    event.waitUntil(
      caches.open(staticAssetsCacheName).then(function (cache) {
        cache.addAll([
            '/',
            ${stringFileCachesArray.slice(1, stringFileCachesArray.length - 1)}
        ]
        );
      }).catch((error) => {
        console.log('Error caching static assets:', error);
      })
    );
  });
  self.addEventListener('activate', function (event) {
    if (self.clients && clients.claim) {
      clients.claim();
    }
    event.waitUntil(
      caches.keys().then(function (cacheNames) {
        return Promise.all(
          cacheNames.filter(function (cacheName) {
            return (cacheName.startsWith('todo-')) && cacheName !== staticAssetsCacheName;
          })
          .map(function (cacheName) {
            return caches.delete(cacheName);
          })
        ).catch((error) => {
            console.log('Some error occurred while removing existing cache:', error);
        });
      }).catch((error) => {
        console.log('Some error occurred while removing existing cache:', error);
    }));
  });
  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request)
          .then((fetchResponse) => {
              return cacheDynamicRequestData(dynamicCacheName, event.request.url, fetchResponse.clone());
          }).catch((error) => {
            console.log(error);
          });
      }).catch((error) => {
        console.log(error);
      })
    );
  });
  function cacheDynamicRequestData(dynamicCacheName, url, fetchResponse) {
    return caches.open(dynamicCacheName)
      .then((cache) => {
        cache.put(url, fetchResponse.clone());
        return fetchResponse;
      }).catch((error) => {
        console.log(error);
      });
  }
`;

fs.writeFile(dest, serviceWorkerScript, function(error) {
    if (error) return;
    console.log('Service Worker Write success');
});

Строки 8-18. : Это место, где все содержимое папки Dist захвачены как массив Staticassetscachefiles.

Линии 22-85 : Это шаблон сервисного работника, который мы говорили раньше. Концепции точно так же, как мы представляем переменные в шаблон, чтобы мы могли повторно использовать шаблон сервисного работника и сделать его полезным для будущего использования. Этот шаблон также был необходим, поскольку нам нужно было добавить Dist Содержание папки к кэше согласно линия 33 Отказ

Линии 87-90 : Наконец, новый сервисный работник будет написан на Dist Папка вместе с его содержанием от шаблона сервисного работника ServiceWorkerscript .

Команда для запуска вышеуказанного скрипта – Узел сборки-SW И это должно быть запущено после WebPack – Mode Production сделано.

Этот сценарий сборки сервисного работника действительно очень помог мне много в кэшировании файлов. В настоящее время я использую это для моих собственных боковых проектов из-за его простоты и большой простоты решения проблемы кэширования.

Если вы, ребята, хотите использовать библиотеку для прогрессивных функций, связанных с веб-приложением, вы можете пойти на Workbox Отказ Эта библиотека делает некоторые реальные аккуратные вещи и имеет удивительные особенности, которые вы можете взять под контроль.

Окончательный взгляд на пакеты

Вот образец Package.json файл со всеми зависимостями:

{
  "name": "vanilla-todos-pwa",
  "version": "1.0.0",
  "description": "A simple todo application using ES6 and Webpack",
  "main": "src/main.js",
  "scripts": {
    "build": "webpack --mode production && node build-sw",
    "serve": "webpack-dev-server --mode=development --hot"
  },
  "keywords": [],
  "author": "Anurag Majumdar",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "autoprefixer": "^9.4.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^1.0.0",
    "compression-webpack-plugin": "^2.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "terser": "^3.14.1",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14",
    "webpack-md5-hash": "0.0.6"
  }
}

Помните, что WebPack часто обновляется, и изменяется происходит в сообществе с новыми плагинами, заменяющими существующие. Таким образом, важно сохранить записку концепций, необходимых для настройки сборки, а не фактических использованных пакетов.

Особенности JavaScript

У всех нас есть выбор: либо писать наши собственные рамки для определенных функций, которые будут использоваться нашим приложением, такими как обнаружение изменения, маршрутизацию, шаблоны хранения, redux etc или потяните уже существующие пакеты для таких функций.

Теперь я буду говорить о голых минимальных функциях, необходимых для того, чтобы структурировать макет нашего приложения и получить его. Позже вы можете добавить свои собственные рамки или пакеты в приложение.

Модули ES6

Мы будем использовать операторы импорта и экспорта ES6 и обрабатываем каждый файл в виде модуля ES6. Эта функция обычно используется популярными каркасами, такими как угловые и реагирующие и довольно удобно. При мощности нашего конфигурации WebPack мы можем полностью использовать мощность отчетности импорта и экспорта.

import { appTemplate } from './app.template';
import { AppModel } from './app.model';

export const AppComponent = {
  // App Component code here...
};

Объект буквальный синтаксис или синтаксис класса ES6

Создание компонентов является очень важной частью нашего приложения. Мы можем пойти с последними веб-стандартами, такими как веб-компоненты, но и для того, чтобы сохранить все возможное, мы можем идти вперед и использовать объект литерального синтаксиса или синтаксиса класса ES6.

Единственное, что с синтаксисом класса в том, что нам нужно создать его, а затем экспортировать его. Итак, чтобы сохранить вещи даже проще, я пошел вперед с объектом буквальным синтаксисом для компонентной архитектуры.

import { appTemplate } from './app.template';
import { AppModel } from './app.model';

export const AppComponent = {

    init() {
        this.appElement = document.querySelector('#app');
        this.initEvents();
        this.render();
    },

    initEvents() {
        this.appElement.addEventListener('click', event => {
            if (event.target.className === 'btn-todo') {
                import( /* webpackChunkName: "todo" */ './todo/todo.module')
                    .then(lazyModule => {
                        lazyModule.TodoModule.init();
                    })
                    .catch(error => 'An error occurred while loading Module');
            }
        });

        document.querySelector('.banner').addEventListener('click', event => {
            event.preventDefault();
            this.render();
        });
    },

    render() {
        this.appElement.innerHTML = appTemplate(AppModel);
    }
};

Линии 4-32: Мы экспортируем объект под названием AppComponent который сразу же доступен для использования в других частях нашего приложения.

Вы можете продолжать и использовать синтаксис ES6 Class Syntax или стандартные веб-компоненты и добиться более декларативного способа записи кода здесь. Для простоты, я решил написать демонстрационную заявку в более необходимый подход.

Динамический импорт

Помните, что я говорил о пропущении на «л» из PRPL шаблон? Динамический импорт – это путь для дальнейшего и ленивого нагрузки наших компонентов или модулей. Так как мы использовали Приложение Shell и PRPL Вместе, чтобы кэшировать оболочку и другие активы маршрута, динамический импорт импортирует ленивый компонент или модуль из кэша вместо сети.

Обратите внимание, что если мы использовали только Приложение Shell Архитектура, остальные активы приложения I.e., содержание куски Папка, не была бы кэширована.

Строки 15-19: Обратитесь к коду компонента приложений; Это место, где сияет динамический импорт. Если мы нажмем на кнопку, имеющую класс BTN-TODO, Тогда только это Точувтельство загружается. Кстати, Точувтельство это просто еще один файл JavaScript, который состоит из набора компонентов объекта.

ES6 Функции стрелки & ES6 Шаблонные литералы

Функции стрелки должны использоваться, особенно где мы хотим убедиться в Это Ключевое слово внутри функции, которое следует обратиться к окружающему контексту, где объявляется функция стрелки. Помимо этого, эти функции действительно помогают создавать аккуратный синтаксис.

export const appTemplate = model => `
    
         ${model.title} 
        
            
        
    
`;

Приведенный выше пример представляет собой функцию шаблона, определенную в виде функции стрелки, которая принимает модель и возвращает HTML-строку, состоящую из данных модели в нем. Струнная интерполяция осуществляется с помощью ES6 шаблон литералов Отказ Настоящая выгода шаблона литералов составляет Многострочные струны и Интерполяция моделей данных в строку.

Вот микро наконечник для обработки шаблонов компонентов и генерации многоразовых компонентов: используйте Уменьшить Функция накапливать все HTML-строки согласно следующему примеру:

const WorkModel = [
    {
        id: 1,
        src: '',
        alt: '',
        designation: '',
        period: '',
        description: ''
    },
    {
        id: 2,
        src: '',
        alt: '',
        designation: '',
        period: '',
        description: ''
    },
    //...
];


const workCardTemplate = (cardModel) => `

    
        
    
    ${cardModel.designation}
    ${cardModel.period}
    
        
            ${cardModel.description}
        
    

`;

export const workTemplate = (model) => `

    
        
             Work 
        
        
            
                This area signifies work experience
            
        
    
    
        ${model.reduce((html, card) => html + workCardTemplate(card), '')}
    

`;

Вышеуказанный кусок кода действительно имеет большое значение. Простые, но интуитивно понятные. Он следит за небольшим вдохновением из рамок там.

Линии 1-19 : Это образец модели моделей, на котором функция «Уменьшить» может работать, чтобы дать функцию шаблона многоразового шаблона.

Строка 53: Эта линия делает всю магию в создании нескольких многоразовых компонентов в одну HTML-строку. Функция уменьшения требует аккумулятора в качестве первого аргумента, а каждое значение массива в качестве второго аргумента.

Благодаря этим простым функциям у нас уже есть структура приложений. Лучший способ узнать особенность – это поставить его в действие, которые они говорят, поэтому здесь мы. ?

Демонстрация приложений

Поздравляю с достижением здесь!

Этот пост действительно охватил множество функций, и подойдет всеми концепциями, и методы займут некоторое время.

Вот демонстрация приложения TO-DO, построенная со всеми функциями, которые обсуждаются в этой статье. Нажмите здесь посетить сайт.

Нажмите здесь Для ссылки на репозиторий GitHub. Не стесняйтесь клонировать репозиторий и пройдите через код для лучшего понимания концептуальных примеров, упомянутых в статье.

Примерное производственное приложение

Производственная площадка представляет собой портфель, разработанный, разработанный и спроектированный с нуля с использованием точных функций, как указано в этой статье. Приложение одно страницы разбит на заказ модули и Компоненты Отказ

Гибкость и сила, которая поставляется с Ванильный JavaScript это что-то уникальное и помогает в создании некоторых удивительных результатов.

Нажмите здесь идти на сайт. Вот сайт в действии:

Посетите сайт, чтобы почувствовать это. Цвета не выпускаются в демо-демонстрации здесь. Инженерия, поставленная на этот сайт, произвела следующие результаты:

Никогда не забил идеальный 100 ранее в любой теме. ?

Заключение

Существует несколько проектов, которые мы могли бы понравиться построить использование ванильного JavaScript вместо каркасов, чтобы быстро добиться определенных результатов. Я написал эту статью, чтобы помочь разработчикам использовать простую пользовательскую настройку для создания своих будущих проектов.

Лучшая часть о структуре ванили состоит в том, что разработчики имеют свободу формировать свои инженерные шаблоны мысли в соответствии с различными случаями использования. Будьте императивным или декларативным стилем программирования, создания или использования последних существующих функций. До тех пор, пока мы производим последовательные и исполнительные приложения с хорошей ремонтностью кода, наша задача выполняется на день.

Счастливый взлом! ?

Другие сообщения мной

Найди меня в https://medium.com/@anurag.majumdar.

➥ веб-разработка

➥ событие жизни

Удобства Google Mobile Web Scholarship и его славные эффекты!

Оригинал: “https://www.freecodecamp.org/news/how-to-write-simple-modern-javascript-apps-with-webpack-and-progressive-web-techniques-a30354eab214/”

Что нам нужно

Архитектурное планирование

Настройка сборки

Голые минимальные функции JavaScript

Архитектурное планирование

Что такое приложение Shell & PrPL?

Как выглядят эти архитектуры в коде?

Наша настройка сборки

Поддержка ES6 & Dynamic Imports

Поддержка Sass & CSS

Пользовательские разработки и настройки производства

Пользовательский сервисный работник

Окончательный взгляд на пакеты

Особенности JavaScript

Модули ES6

Объект буквальный синтаксис или синтаксис класса ES6

Динамический импорт

ES6 Функции стрелки & ES6 Шаблонные литералы

${model.title}

Демонстрация приложений

Примерное производственное приложение

Заключение

Другие сообщения мной

➥ веб-разработка

➥ событие жизни

Читайте ещё по теме: