Рубрика «webpack» - 10

Пособие по webpack

2016-09-06 в 10:16, admin, рубрики: css, html, javascript, JS, Node, node.js, npm, web, webpack, Разработка веб-сайтов

Пособие по webpack - 1

Давайте сначала разберемся, зачем нужен вебпак (webpack), и какие проблемы он пытается решить, а потом научимся работать с ним. Webpack позволяет избавиться от bower и gulp/grunt в приложении, и заменить их одним инструментом. Вместо bower'а для установки и управления клиентскими зависимостями, можно использовать стандартный Node Package Manager (npm) для установки и управления всеми фронтэнд-зависимостями. Вебпак также может выполнять большинство задач grunt/gulp'а.

Bower это пакетный менеджер для клиентской части. Его можно использовать для поиска, установки, удаления компонентов на JavaScript, HTML и CSS. GruntJS это JavaScript-утилита командной строки, помогающая разработчикам автоматизировать повторяющиеся задачи. Можно считать его JavaScript-альтернативой Make или Ant. Он занимается задачами вроде минификации, компиляции, юнит-тестирования, линтинга и пр.

Допустим, мы пишем простую страницу профиля пользователя в веб-приложении. Там используется jQuery и библиотеки underscore. Один из способов — включить оба файла в HTML:Читать полностью »

10 особенностей Webpack

2016-09-05 в 13:07, admin, рубрики: framework, javascript, JS, React, ReactJS, redux, webpack, Блог компании Plarium, джаваскрипт, Программирование, разработка мобильных приложений, фреймфорк, фреймфорки

Webpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.

10 особенностей Webpack - 1 Читать полностью »

Выбираем состав изоморфных React-приложений на следующие 12 месяцев

2016-08-29 в 15:58, admin, рубрики: boilerplate, eslint, javascript, node.js, npm, ReactJS, redux, starter kit, webpack

Друзья, уже шесть часов вечера, последний понедельник августа, а это значит — последняя неделя лета. Давайте подведём итог и немного пофантазируем?

Сейчас формируем некий Isomorphic React App бойлерплейт на следующие 12 месяцев, с которым можно быстро стартовать новые проекты. Пока видим такой набор:

1. React 15.
2. На сервере — Node.js и Express.
3. CSS modules и isomorphic-style-loader для автоматической генерации Critical CSS при Server-side Rendering. Или всё-таки JSS? Читать полностью »

It’s the future

2016-08-20 в 9:07, admin, рубрики: angular, babel, backbone, ES6, es7, flux, hotreload, immutable, javascript, jquery, jsx, mvc, Node, observable, React, rxjs, virtualdom, webpack

Этот пост просто шутка и не пытается выставить инструменты, упомянутые здесь, в дурном свете. Я использую их постоянно, они великолепны, и я рекомендую их использовать. По мотивам It's the future @ CircleCI Blog

— Эй, я бы хотел научиться писать крутые веб-приложения. Слышал, у тебя есть опыт.

— Да, я как раз занимаюсь фронтендом, юзаю пару тулз.

— Круто. Я щас делаю простое приложение — обычный TODO-лист, используя HTML, CSS и JavaScript, и планирую заюзать JQuery. Это норм?

— Не-не-не. Это олдскул. Джиквери мёртв — никто не использует его теперь! Тебе нужен React. Это будущее.

— Окей, лады. А что это?

Читать полностью »

Прогрессивная загрузка web-приложения с помощью разделения кода

2016-08-15 в 7:32, admin, рубрики: javascript, progressive loading, progressive web apps, React, ReactJS, web-разработка, webpack

В этой статье мы рассмотрим как можно ускорить первоночальную загрузку web-приложения c помощью разделения кода (code splitting). Для реализации задуманного я буду использовать webpack v1, а для демонстрации — React (не обязателен).

В большинстве своих проектов я собираю все javascript файлы (а иногда css и картинки тоже) в ОДИН ОЧЕНЬ БОЛЬШОЙ bundle.js. Возможно ты, дорогой читатель, делаешь точно так же. Это достаточно стандартная практика для современных веб-приложений.

Но этот подход имеет один (и иногда достаточно важный) недостаток: первоночальная загрузка приложения может занимать очень долгое время, так как web-браузер должен (1) загрузить огромный файл и (2) распарсить тонну js-кода. Загрузка файла может занять долгое время, если у пользователя медленный интернет. Так же этот огромный файл может содержать код компонентов, которые пользователь НИКОГДА не увидит (например, пользователь просто не откроет некоторые части вашего приложения).

Что делать?
Читать полностью »

Используем Webpack вместо Sprockets в Ruby on Rails

2016-04-27 в 9:15, admin, рубрики: npm, ruby on rails, sprockets, webpack

За работу frontend части приложения в Ruby on Rails отвечает библиотека Sprockets, которая не дотягивает до потребностей современного frontend приложения. В чем именно не дотягивает можно почитать, например, здесь и здесь.

Хотя уже есть достаточно статей на тему связки webpack+rails и даже специальный гем есть, предлагаю посмотреть на еще один велосипед, умеющий также деплой делать.

Используем Webpack вместо Sprockets в Ruby on Rails - 1
Читать полностью »

Тестирование JS. Кармический Webpack

2016-03-03 в 20:51, admin, рубрики: chai, jasmine, javascript, karma, tdd, testing, webpack, Веб-разработка, Тестирование веб-сервисов

Привет!

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

В этой статье хочу поделиться опытом смешивания гремучей смеси webpack + jasmine + chai + karma.
Читать полностью »

Интегрируем Webpack в Visual Studio 2015

2016-02-28 в 13:56, admin, рубрики: .net, ASP, C#, Visual Studio, webpack, webpack-task-runner

В статье я расскажу как сделать работу с webpack из Visual Studio удобнее, а именно: автоматический запуск webpack при открытии проекта, бандлинг при изменении файлов и оповещение об ошибках на рабочем столе.
Читать полностью »

Конец эры глобального CSS

2016-02-02 в 10:15, admin, рубрики: css, javascript, webpack, БЭМ, Веб-разработка, изоляция ресурсов, модульность, перевод, системы сборки

Все CSS-селекторы живут в глобальной области видимости.

Каждому, кто когда-либо имел дело с CSS, приходилось мириться с этой глобальной особенностью. Модель, некогда созданную для стилизации академических документов, сейчас едва ли можно назвать удобным инструментом для создания современных веб-приложений.

Абсолютно каждый селектор потенциально может вступить в борьбу с другим селектором или стилизовать «посторонний» элемент. В этой «глобальной» борьбе селектор может даже полностью проиграть, в итоге не применив к странице ни одного из своих правил.

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

Так не должно быть. Пора оставить позади эру глобальных стилей. Наступило время закрытого CSS.
Читать полностью »

How to ReactJS

2016-01-16 в 14:51, admin, рубрики: bem, ES6, falcor, flux, immutable.js, javascript, ReactJS, redux, relay, webpack

Если вы новичок в React (или frontend-разработке в принципе), экосистема может показаться запутанной. В этом несколько причин.

* Исторически React был разработан для экспертов и ранних последователей
* Facebook открывает исходный код только тех продуктов, которые используются социальной сетью, т. е. изначально не нацеленные на проекты-меньше-чем-Facebook
* Огромное количество гайдов по React совершенно разной сложности

Здесь я буду считать, что вы уже знакомы с HTML, CSS и JavaScript.