Так уж случилось, что в последнее время мне приходится осваивать новые инструменты. Очередным таким инструментом стал webpack.
Инструмент интересный, но после переезда с Google Closure * для меня стало загадкой, почему webpack не ужимает имена классов, как это делает Google Closure Stylesheets.
За день, на коленке, мною был написан plugin который вполне не плохо реализовал этот функционал.
Более подробное описание ниже.
Читать полностью »
Рубрика «webpack» - 9
Очередной метод снизить объем SPA приложения (webpack)
2016-11-29 в 18:03, admin, рубрики: css, fronted development, javascript, Preprocessor, webpack, Разработка веб-сайтовКак переписать SDK на TypeScript, обновить платформу и ни о чем не жалеть
2016-09-28 в 7:30, admin, рубрики: edge, h264, javascript, noflash, ortc, renegotiation, TypeScript, voximplant, webpack, WebRTC, Блог компании Voximplant, Разработка веб-сайтов, Разработка систем связи
У нас новая версия WebSDK – v4. Пока это только public beta версия, но она уже стабильна для большинства повседневных кейсов. Мы старались сохранить обратную совместимость новой версии.
А еще обновилась платформа – v3. Там много всего нового и интересного. Все работает быстрее и веселее. О подробностях ниже.
Как видите, у нас дабл страйк! Под катом – что получилось за 6 месяцев перекрестного дебага, непрерывного улучшения и боли. Спойлер: больше никакого древнего Flash. Только чистый WebRTC + ORTC.
Приложение на Elm за считанные секунды
2016-09-19 в 21:12, admin, рубрики: build system, cli, elm, functional programming, javascript, webpack, функциональное программированиеСовременная разработка браузерных приложений стала слишком сложной. Не столько благодаря настоящей алгоритмической сложности, сколько благодаря изобилию подходов для этой самой разработки.
Наличие большого выбора — хорошо, но не всегда помогает продуктивности. Разработчики ценны, в первую очередь, умением писать полезный для бизнеса код. Проблема в том, что код — это лишь часть приложения. Коду сопутствует инфраструктура множества других инструментов, помогающих разработчику производить этот код.
React.js: собираем с нуля изоморфное – универсальное приложение. Часть 1: собираем стек
2016-09-14 в 7:45, admin, рубрики: babel, eslint, express.js, isomorphic, javascript, node.js, react.js, ReactJS, Universal, webpack
Лицо моей жены, когда она вычитывала эту статью
Я решил написать цикл статей, который и сам был бы счастлив найти где-то полгода назад. Он будет интересен в первую очередь тем, кто хотел бы начать разрабатывать классные приложения на React.js, но не знает, как подступиться к зоопарку разных технологий и инструментов, которые необходимо знать для полноценной front-end разработки в наши дни.
Я хочу с нуля реализовать, пожалуй, наиболее востребованный сценарий: у нас есть серверная часть, которая предоставляет REST API. Часть его методов требует, чтобы пользователь веб-приложения был авторизован.
Пособие по webpack
2016-09-06 в 10:16, admin, рубрики: css, html, javascript, JS, Node, node.js, npm, web, webpack, Разработка веб-сайтов
Давайте сначала разберемся, зачем нужен вебпак (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.
Выбираем состав изоморфных 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 и даже специальный гем есть, предлагаю посмотреть на еще один велосипед, умеющий также деплой делать.
