Рубрика «webpack»

в 13:46, , рубрики: ES6, javascript, mobx, React, ReactJS, webpack

Готовим плацдарм для react-приложения - 1

Я хочу рассказать о процессе создание платформы для react приложения, которая использует mobx в качестве Model-и. Пройти путь от пустой директории проекта до рабочего примера. Рассмотреть основные моменты, на которые я обращал внимание в процессе разработки. Постараюсь насытить текст уточняющими ссылками, дополнительные заметки будут выделены курсивом с пометкой «Note:».

Рассказ будет состоять из двух частей:

  1. Готовим плацдарм для react приложения
  2. Mobx + react, взгляд со стороны

Буду писать «как я вижу», поэтому предложения и замечания по улучшению приветствуются. Надеюсь, читатель знает, что такое npm, node.js и react.js, имеет базовые знания о props и state. На момент написания статьи, у меня стоит windows и нестабильная node.js 7.3.0 версии.
Читать полностью »

Каждый раз начиная писать React приложение, вы так или иначе выберите какой-то вариант:

  • копи-паст вашего предыдущего проекта
  • какой-то бойлерплейт или даже генератор (типа Yeoman)
  • готовый фреймворк не требующий конфигурации
  • пишете сами все с нуля

Каждый из способов имеет свои сильные и слабые стороны, как на длинной, так и на короткой дистанции.

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

«Hello, (real) world!» на php в 2017 году - 1Вы наверняка думаете, что писать на php — это просто. И «hello, world» выглядит примерно так так:

<?php
echo 'Hello, world!';

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

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

История о том, как мы поменяли сборку проекта с grunt на webpack

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

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

Как выяснилось, такое случается, если не модернизировать систему сборки вместе с ростом проекта. Хорошая новость в том, что это успешно лечится! Летом мы подтвердили это в бою и хотим поделиться опытом.

Angular 1.x: крадущийся webpack, затаившийся grunt - 1
Читать полностью »

Webpack 2 Release

Предупреждение: проверьте, как установлена версия Webpack в package.json. Возможно скоро ваш continuous integration сломается.

Наконец-то Webpack 2 преодолел рубеж beta и release candidate. Это значит, что всё работает стабильно, и можно без опаски использовать его в production.

Список изменений/улучшений:

  • Нативная поддержка ES6-модулей;
  • Разбиение кода на чанки — Code Splitting with ES6;
  • Поддержка динамических выражений при загрузке модулей — Dynamic expressions;
  • Изменения при работе с Babel;
  • ES6-специфичные оптимизации;
  • Breaking Changes;
  • Новый сайт с документацией.

Подробности под катом. Читать полностью »

КПДВ У нас в солюшене 51 проект. В 10 из них используется TypeScript. Объем минимизированного JavaScript-кода ~1 MB. TypeScript-код одних проектов зависит от кода других проектов. Для многих React-компонентов используются глобальные переменные.

Все вместе это приводит к долгим часам отладки front-end кода. Чтобы упростить себе жизнь, мы внедрили Webpack. А по пути отловили грабли.

TL;DR

  1. Устанавливаем node 7 + npm
  2. Выполняем в консоли npm i -g webpack typescript
  3. Устанавливаем Webpack Task Runner
  4. Добавляем webpack.config.js
    в папку "основного" проекта
  5. Добавляем webpack.config.part.js
    в папку каждого зависимого проекта

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

Ну что, мальчиши и мальчишки, а не пора ли вам познать джесай до? Не, ну вам то рано еще, а я вот пожалуй начну. Но вы можете присоединиться.

В череде последних статей про jsx/react и прочее я наблюдал наматывание соплей на кулак и прочие непотребства в обсуждениях, дескать как же нам без бабеля, а зачем нам jsx и прочее малодушничание. Будем пресекать. Сегодня мы будем строить webpack, прикрутим к нему typescript и jsx без реакта, соберем на tsx custom element без бабеля, зарегаем его и выведем на странице. Многие из вас сегодня повзрослеют, а некоторые возможно даже станут мужчинами.
Если вы боитесь что мир для вас никогда уже не будет прежним — не бойтесь, он прежним никогда и не был, так что заходите…
Читать полностью »

Так уж случилось, что в последнее время мне приходится осваивать новые инструменты. Очередным таким инструментом стал webpack.
Инструмент интересный, но после переезда с Google Closure * для меня стало загадкой, почему webpack не ужимает имена классов, как это делает Google Closure Stylesheets.
За день, на коленке, мною был написан plugin который вполне не плохо реализовал этот функционал.
Более подробное описание ниже.
Читать полностью »

image

У нас новая версия WebSDK – v4. Пока это только public beta версия, но она уже стабильна для большинства повседневных кейсов. Мы старались сохранить обратную совместимость новой версии.

А еще обновилась платформа – v3. Там много всего нового и интересного. Все работает быстрее и веселее. О подробностях ниже.

Как видите, у нас дабл страйк! Под катом – что получилось за 6 месяцев перекрестного дебага, непрерывного улучшения и боли. Спойлер: больше никакого древнего Flash. Только чистый WebRTC + ORTC.

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

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

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

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