Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Frontend на CodeFest: React, Javascript и лучшие практики

Блог компании CodeFest Разработка веб-сайтов *JavaScript *Программирование *Разработка мобильных приложений *
image

Продолжаем рассказывать о программе CodeFest 2018. На очереди — мощный фронт докладов фронтенд-секции.
Читать дальше →
Всего голосов 22: ↑19 и ↓3 +16
Просмотры 5.5K
Комментарии 3

Webpack 4 и code splitting

Веб-дизайн *JavaScript *Node.JS *Системы сборки *
25 февраля 2018 года вышел релиз webpack 4.0.0 (и на сегодняшний день 4.0.1). Одна из полезных и сравнительно новых фич webpack — code splitting, перенесена в новой версии из плагинов в основную конфигурацию. При практически полном отсутствии документации, как теперь нужно конфигурировать code splitting в версии 4 — я немного испытал шок, но все же попытался собрать информацию, чтобы по минимуму начать работать с новой версией. Я надеюсь, что через некоторое время появятся и обстоятельные tutorials, и статьи. Пока же спешу сделать заметки по найденной информации, чтобы не потерять ее на просторах интернета.
Читать дальше →
Всего голосов 27: ↑17 и ↓10 +7
Просмотры 18K
Комментарии 27

Обновляем Angular до 6-ой версии в проекте без использования CLI

Блог компании ISPsystem Разработка веб-сайтов *Программирование *Angular *TypeScript *
В этой статье я расскажу о тернистом пути обновления Angular с кастомным Webpack конфигом, который нашей команде пришлось пройти неделю назад. Возможно, наш опыт будет полезен тем, кто использует Angular со своим Webpack конфигом, а остальным — интересен как иллюстрация того, куда может завести современный frontend и как с этим жить.



Наша команда работает над интерфейсом BILLmanager 6. Дабы вы имели общее представление о проекте до обновления, сообщу, что количество файлов в нем уже перевалило за 67 тысяч. Архитектурно можно выделить два подпроекта: модуль регистрации и основной пользовательский интерфейс. По технологиям основу составляют компоненты, директивы и модули Angular, написанные на TypeScript. Есть несколько компонентов на Web components. Для стилизации мы используем SASS/SCSS и применяем CSS variables, чтобы темизировать приложение без перекомпиляции.
Читать дальше →
Всего голосов 27: ↑24 и ↓3 +21
Просмотры 9.8K
Комментарии 22

Webpack 4 и разделение конфигурационного файла на модули

Разработка веб-сайтов *JavaScript *Системы сборки *
Привет, Хабр! Сегодня я расскажу вам о Webpack 4 с разделением кода на отдельные модули, а также о интересных решениях, которые помогут вам быстрее собрать сборку на webpack 4. В конце, я предоставлю свою базовую сборку на webpack c самыми необходимыми инструментами, которую вы в последствие сможете расширить. Данная сборка вам поможет понять данный материал, а также возможно поможет быстрее написать свою реализацию и быстрее решить возможные проблемы.
Читать дальше →
Всего голосов 14: ↑14 и ↓0 +14
Просмотры 17K
Комментарии 11

4 совета для оптимизации webpack-приложения

Разработка веб-сайтов *JavaScript *Клиентская оптимизация *
Из песочницы
Всем привет!

За время моей работы с вебпаком у меня накопилась пара интересных советов, которые помогут вам приготовить отлично оптимизированное приложение. Приступим!

Кот-фронтендер смотрит на webpack и говорит 'Белиссимо'

Читать дальше →
Всего голосов 19: ↑19 и ↓0 +19
Просмотры 17K
Комментарии 17

Готовим идеальный CSS

Блог компании Constanta JavaScript *Клиентская оптимизация *ReactJS *VueJS *
Tutorial
Привет, Хабр!

Не так давно я понял, что работа с CSS во всех моих приложениях — это боль для разработчика и пользователя.

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

Read more →
Всего голосов 38: ↑32 и ↓6 +26
Просмотры 48K
Комментарии 25

Делаем Modern Build

Блог компании Constanta Разработка веб-сайтов *JavaScript *Программирование *Клиентская оптимизация *
Tutorial
Привет, Хабр!

Каждый современный браузер сейчас позволяет работать с ES6 Modules.

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

Под катом рассказ о том, как я смог уменьшить размер приложения на 11% без ущерба для старых браузеров и своих нервов.


Читать дальше →
Всего голосов 24: ↑22 и ↓2 +20
Просмотры 10K
Комментарии 7

Оптимизация скриптов с Webpack SplitChunksPlugin

Разработка веб-сайтов *JavaScript *
Из песочницы

В этой статье я бы хотел поделиться своим опытом по разбиению бандлов для многостраничного сайта с помощью Webpack 4. Cначала создадим для каждой страницы свою точку входа. Рассмотрим на примере 4 страниц:


const path = require("path");

const PATHS = {
  src: path.resolve(process.cwd(), "src"),
  dist: path.resolve(process.cwd(), "dist")
};

module.exports = {
  entry: {
    common: `${PATHS.src}/js/common`,
    index: `${PATHS.src}/js/index`,
    contacts: `${PATHS.src}/js/contacts`,
    about: `${PATHS.src}/js/about`,
  }
}

При сборке для каждой страницы будет создан свой бандл. В точку входа common я вынес общие скрипты для всех страниц. Чтобы подключить наши бандлы на страницы воспользуемся плагином Webpack'a HtmlWebpackPlugin.


Рассмотрим на примере:


  module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: `${PATHS.dist}/index.html`,
      template: `${PATHS.dist}/index.html`,
      chunks: ["index", "common"]
    })
    ...
  ]
  ...
};
Читать дальше →
Всего голосов 14: ↑11 и ↓3 +8
Просмотры 8.4K
Комментарии 4

Архитектура SPA-приложения биржи в 2019 году

Разработка веб-сайтов *JavaScript *ReactJS *
Из песочницы
Tutorial

Приветствую, хабровчане!


Читаю данный ресурс со времени основания, но время на написание статьи появилось только сейчас, а значит пора поделиться своим опытом с сообществом. Начинающим разработчикам, рассчитываю, статья поможет улучшить качество проектирования, а опытным выступит в качестве чек-листа, чтобы не забыть важные элементы на этапе архитектуры. Для нетерпеливых — итоговый репозиторий и демо.


Читать дальше →
Всего голосов 32: ↑26 и ↓6 +20
Просмотры 14K
Комментарии 26

MicroSPA, или как изобрести квадратное колесо

Блог компании Digital Design CMS *JavaScript *VueJS *
Всем привет, меня зовут Андрей Яковенко, и я веб-разработчик компании Digital Design.

В нашей компании есть множество проектов, реализованных с помощью системы управления веб-контентом sitefinity, или по-простому CMS. Причины, по которым мы ее используем, были описаны ранее в этой статье. CMS – это, как правило, Multi Page Application, и сегодня я расскажу о том, что может дать внедрение frontend-фреймворков в решения на sitefinity и как это сделать.


Читать дальше →
Всего голосов 8: ↑3 и ↓5 -2
Просмотры 3.1K
Комментарии 15

Как я выкинул webpack и написал babel-plugin для транспила scss/sass

JavaScript *Node.JS *ReactJS *
Из песочницы

Предыстория


Как-то субботним вечером я сидел и искал способы сборки UI-Kit с помощью webpack. В качестве демо UI-kit я пользуюсь styleguidst. Конечно же, webpack умный и все файлы, которые есть в рабочем каталоге он запихивает в один бандл и оттуда всё крутится и вертится.

Я создал файл entry.js, импортнул туда все компоненты, затем оттуда же экспортнул. Вроде всё ок.

import Button from 'components/Button'
import Dropdown from 'components/Dropdown '

export {
  Button,
  Dropdown 
}

И после сборки всего этого, я получил на выходе output.js, в котором как и ожидалось было всё — все компоненты в куче в одном файле. Тут возник вопрос:
А как мне собрать все кнопочки, дропдауны и прочее по отдельности, что бы импортировать в других проектах?
А я ведь хочу это ещё и в npm залить как пакет.

Хм… Поехали по порядку.
Читать дальше →
Всего голосов 10: ↑6 и ↓4 +2
Просмотры 2.4K
Комментарии 8

Основы настройки Webpack

Разработка веб-сайтов *JavaScript *
Tutorial
Для начала установим webpack, делается это с помощью команд:

yarn add webpack webpack-cli -D, если используете менеджер пакетов yarn
npm i webpack webpack-cli --save-dev, для менеджера пакетов npm

Настраивается Webpack с помощью конфигурационного файла webpack.config.js, который хранится в корневой директории проекта.

Пример конфигурационного файла:

const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};

Начальная конфигурация представляет собой следующее:

  • watch — заставляет webpack отслеживать изменения в файлах и заново выполнять сборку;
  • entry — Указывает на точку входа в проект, и откуда нужно начать построение графа внутренних зависимостей проекта;
  • output — Указывает путь, где будет располагаться создаваемый файл и как он будет называться;

Так же необходимо установить webpack-dev-server, который понадобится для разработки и отладки приложения.

yarn add webpack-dev-server для менеджера пакетов yarn или
npm i webpack-dev-server если используется npm

Для настройки webpack-dev-server добавим devServer в нашем конфигурационном файле.

Параметры для webpack-dev-server:

module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};

Также нам нужно добавить/заменить в нашем package.json файле скрипт запуска проекта:

"start": "webpack-dev-server --mode development",

и скрипт для сборки билда:

"build": "webpack --mode production"

Загрузчики


Загрузчики (loaders) — это специальные модули, которые используются для «загрузки» других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».
Читать дальше →
Всего голосов 6: ↑4 и ↓2 +2
Просмотры 8.3K
Комментарии 0