Pull to refresh
@Queue read-only

User

  • Posts
  • Comments

Webpack + React. Как уменьшить бандл в 15 раз

JavaScript *Node.JS *ReactJS *
image

Ясной инструкции по сборке webpack для продакшена я не нашел. Поэтому решил написать эту статью. Надеюсь, пригодится.
Существует множество сборщиков скриптов. Я выбрал для себя Webpack по таким критериям:

  • Гибкость настройки
  • Большое количество плагинов и лоадеров
  • Lazy loading
  • Использование es6 и es7 синтаксиса с помощью babel-loader

Читать дальше →
Total votes 47: ↑39 and ↓8 +31
Views 51K
Comments 31

Первый официальный релиз Webpack 2. Что нового по сравнению с Webpack 1?

Developer Soft corporate blog JavaScript *Programming *Node.JS *ReactJS *
Translation

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;
  • Новый сайт с документацией.

Подробности под катом.

Читать дальше →
Total votes 60: ↑58 and ↓2 +56
Views 39K
Comments 19

Пособие по webpack

Website development *CSS *JavaScript *HTML *Node.JS *
Translation
Tutorial


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


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

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

Читать дальше →
Total votes 42: ↑41 and ↓1 +40
Views 336K
Comments 13

WebPack: как внутри устроено Hot Reloading

Voximplant corporate blog Website development *JavaScript *Programming *
Наша платформа voximplant активно использует javascript. С помощью него клиенты управляют в реальном времени звонками, на нем работает наша backend логика и большинство frontend. Javascript мы любим, ценим и стараемся быть в курсе последних новостей. Сейчас наши разработчики активно экспериментируют с перспективной связкой webpack + typescript + react (кстати, для typescript мы сделали type definitions к нашему web sdk, но об этом как-нибудь в другой раз).

Особенно нам нравится «hot module replacement»: возможность при изменении исходников очень быстро отобразить изменения в браузере без перезагрузки страницы. Выглядит как магия. К сожалению, документировано тоже как магия — по словам eyeofhell, нашего технического евангелиста, «пример на офсайте — это уникальная комбинация частных случаев и особых команд, любое изменение в которых делает его неработоспособным». На наш взгляд все не так плохо, за пару вечеров вполне можно разобраться. Но и не так просто, как хотелось бы. Поэтому специально для Хабра под катом мы максимально просто и понятно расскажем как работает под капотом вся эта машинерия.
Открыть попкорн и посмотреть шоу с эвалом и вебсокетами
Total votes 26: ↑26 and ↓0 +26
Views 38K
Comments 12

Webpack для Single Page App

Website development *JavaScript *HTML *Node.JS *

Привет!





Отгремели фанфары, прошел звон в ушах от истязаний «евангелистов», модников в сфере фронтенд разработки. Кто-то ушел на sprockets, кто-то пустился во все тяжкие и стал писать свои велосипеды или расширять функционал gulp или grunt. Но статей по поводу популярных инструментов автоматизации процесса сборки – стало существенно меньше и это факт! Пора бы заполнить освободившееся пространство чем-то существенно иным.

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

Читать дальше →
Total votes 13: ↑13 and ↓0 +13
Views 72K
Comments 61

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

Plarium corporate blog JavaScript *Programming *Development of mobile applications *ReactJS *
Translation
Webpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.

Читать дальше →
Total votes 51: ↑48 and ↓3 +45
Views 69K
Comments 52

How to ReactJS

Website development *JavaScript *ReactJS *
Translation
Tutorial
Для новичка, экосистема вокруг React (как и фронтэнда в целом) может показаться запутанной. Этому есть несколько причин.

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


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

Читать дальше →
Total votes 46: ↑35 and ↓11 +24
Views 84K
Comments 24

Собеседование на должность JavaScript разработчика

JavaScript *Programming *


Недавно прочитал неплохой пост на тему поиска работы QA и подумал, что похожий пост был бы полезен для JavaScript разработчиков. В конечном счёте, веб движется вперед семимильными шагами, и соискателей на позицию JavaScript программиста хоть отбавляй (разумеется, хороших всегда меньше).
Читать дальше →
Total votes 126: ↑115 and ↓11 +104
Views 282K
Comments 313

jQuery изнутри — введение

Website development *JavaScript *jQuery *
Tutorial
По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.

У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.

Извините, отвлекся. Суть поста и следующих частей серии в том, чтобы рассказать о том, как же работает библиотека изнутри и что же в ней происходит по мере выполнения каких-то методов.
Готов и хочу читать дальше
Total votes 149: ↑139 and ↓10 +129
Views 101K
Comments 80

Интернет магазин — 15000 евро за первый месяц

Sales management *
В народе есть известная поговорка „Первый Блин Комом“, чего не могу сказать о своём свежем опыте интернет торговли. Скорее всего, это просто исключение подтверждающее правило, но, тем не менее, хочется рассказать о тех небольших выводах, что я сделал за последний месяц.

Итак, небольшая история о том, как можно довольно легко заработать за один месяц минимум 15 000 евро.

Мой профессиональный род деятельности — веб-разработка. Занимаюсь R&D в одной небольшой IT компании, пишу «навороченные» приложения для корпоративных интранетов и, в принципе, на жизнь не жалуюсь. Конечно, при таком раскладе хочется параллельно вести какой-нибудь интересный проект, чем неоднократно занимался в мире Open Source. Со временем, правда, захотелось на побочных проектах так же как-то зарабатывать, что с Open Source оказалось не так просто, как может показаться из статей на Хабре :) Потому и решил попробовать для себя что-то принципиально новое — открыть интернет магазин.

Читать дальше →
Total votes 517: ↑493 and ↓24 +469
Views 88K
Comments 389

Ресурсы, которые помогут выучить английский язык

Studying in IT
В статье «Как учить английские слова» возникло очень оживленное обсуждение, в котором читатели привели ряд ссылок на интересные ресурсы. Теперь все они собранны в одном месте.
Читать дальше →
Total votes 82: ↑78 and ↓4 +74
Views 27K
Comments 53

За что HTML-верстальщики так не любят веб-дизайнеров

Web design *
Sandbox
За время своей работы верстальщиком, мне довелось иметь дело с кучей разных макетов как от новичков дизайна (или порой просто левых людей), так и до профессионалов. И за это время я успел набрать приличную выборку наиболее типичных багов в макетах, которых не в состоянии избежать даже маститые специалисты. Сразу оговорюсь — в некоторых организациях есть внутренние «требования к дизайн-макетам», и по идее, при несоответствии дизайна этим требованиям, он должен без вопросов отправляться на доработку, но реалии таковы, что зачастую проще самому внести нужные правки, чем гонять документ туда-сюда по трекеру. Но даже в этих «требованиях» упомянуты далеко не все очевидно возможные «косяки». Постараюсь привести наиболее популярные и универсальные (без личностной привязки). Да, кстати, все баги привожу под использование фотошопных psd — ну уж де-факто это стандарт в веб-макетах. Да и не попадались мне ещё макеты в векторе (и надо сказать, слава богу).
Читать дальше →
Total votes 149: ↑128 and ↓21 +107
Views 115K
Comments 273

Дизайнь как верстальщик

Web design *


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

В этой статье я попробовал собрать некоторые рекомендации для дизайнеров, делающих мир чуть светлее. Спросите у верстальщика о его проблемах, отправьте эту статью дизайнеру. Ибо совершенству нет предела.
Читать дальше →
Total votes 59: ↑53 and ↓6 +47
Views 55K
Comments 66

Где погрызть гранит науки

Studying in IT
image Здравствуй, хабрасообщество. Я знаю, ты любишь халяву. А еще ты любишь учиться. Ведь так? А что может быть лучше для хабравчанина бесплатного образования? Вот и решил собрать специально для тебя подборку из ссылок, где можно набраться уму-разуму в области IT.
Все нижеперечисленные ресурсы абсолютно и официально бесплатны и свободны, что не может не радовать.

UPD. Переранжировал сайты. В категорию «Компьютерные науки» попали те сайты, которые можно внести более, чем в одну из нижеперечисленных категорий. Ранжировка производилась по большинству содержимого, то есть в некоторых сайтах, отнесенных к определенной категории, могут попадаться статьи не относящиеся к определенной, но они будут составлять абсолютное меньшинство

Большое спасибо в помощи добавлении ресурсов vansickle, RedFox, kagen, theinterman, sM1Le.

Англоязычные ресурсы



Компьютерные науки



OpenCourseWare MIT




Одно из самых больших хранилищ учебных курсов. Здесь собраны практически все курсы, которые преподаются в Massachusets Institute of Technology, который по праву считается одним из лучших в мире. На сайте всего 1900 курсов, а тех, которые преподаются на факультете Electrical Engineering and Computer Science я насчитал более 200. Состав большинства курсов: краткие конспекты лекций, подробное описание курса, календарный план, задания на лабораторные работы, задания на курсовые проекты и экзамены, промежуточные модули. К некоторым курсам прилагаются и видеолекции.

смотреть другие сайты
Total votes 223: ↑213 and ↓10 +203
Views 15K
Comments 69

Куда податься программисту за знаниями в этом году

Badoo corporate blog Website development *Programming *

image
Highload++ в Москве, ноябрь 2016


Мы сделали для вас подборку лучших (по нашему мнению) выступлений с IT-конференций, на которые собираемся поехать в первой половине 2017 года (как и обещали).


Всё это будет полезно web-программистам (PHP, Go, JS), QA и DevOps. Да, в списке довольно мало конференций, проводящихся на территории России и стран СНГ, но на сегодняшний день их, увы, в принципе не так много. Так что, если вдруг вы знаете о каком-нибудь стоящем мероприятии, дополняйте наш список в комментариях.

Total votes 58: ↑55 and ↓3 +52
Views 31K
Comments 22

Видео лекций всего курса первой Школы разработки интерфейсов Яндекса

Яндекс corporate blog Website development *
Tutorial
Разработка интерфейсов — одно из важнейших направлений в Яндексе, сервисами которого пользуются миллионы людей. А ни один российский вуз, к сожалению, не готовит разработчиков интерфейсов. Все знания, которые необходимы современному верстальщику или фронтенд-программисту, приходится черпать из статей в интернете, книг, докладов на конференциях. Но зачастую этого бывает недостаточно. Почти каждого нового разработчика интерфейсов, которого мы принимали на работу, приходилось многому обучать.

За долгое время работы в Яндексе нам удалось систематизировать все наши знания и огромный опыт в создании фронтенда веб-сервисов. Результатом этого осмысления и длительной работы стала первая Школа разработки интерфейсов, занятие которой шли в московском офисе Яндекса. Вся практическая часть обучения проходила в реальных проектах Яндекса. Теоретическая же состояла из лекций, которые читали ведущие разработчики интерфейсов Яндекса: Сергей veged Бережной, Михаил mishanga Трошев, Алексей doochik Андросов, Михаил azproduction Давыдов и другие.

Выпускники первой Школы разработки интерфейсов Яндекса

Сегодня мы выкладываем видеозаписи каждой из них. Весь курс систематизирован и поделен на пять блоков: инструменты разработки, технологии в разработке интерфейсов, языки программирования, фреймворки, дизайн.

Читать дальше →
Total votes 164: ↑155 and ↓9 +146
Views 177K
Comments 64

Как работают браузеры: принципы работы современных веб-браузеров

Website development *
Просматривая одно из обучающих видео "Школы разработки интерфейсов" Яндекса, наткнулся на ссылку на офигенный труд израильской веб-программистки Тали Гарсиэль (Tali Garsiel) "How browsers work" (Как работают браузеры).

Она в течение нескольких лет отслеживала всю издаваемую информацию о внутреннем устройстве браузеров, изучала исходный код WebKit и Gecko и, в конце концов, собрала все воедино. Вот что пишет сама Тали:
Когда на 90% компьютеров был установлен IE, приходилось мириться с тем, что это загадочный «черный ящик», однако теперь, когда более половины пользователей выбирает браузеры с открытым исходным кодом, пришло время разобраться, что скрывается у них внутри, в миллионах строк программного кода на C++...
Пролистав, я был поражен — отличная работа. Внутреннее устройство браузеров, алгоритмы разбора — все хорошо иллюстрировано, доступно и понятно. И без излишних подробностей, страниц на 30-40. Как раз то, что нужно. Решил — это надо обязательно перевести. Покопался еще немного — оказалось перевод уже как 1,5 года есть!

Возможно для кого-то это давно уже не новость, но, надеюсь, для тех, кто не слышал, будет полезно (на хабре упоминаний не нашел).

Под катом содержание перевода, чтобы решить стоит ли читать.
Читать дальше →
Total votes 200: ↑179 and ↓21 +158
Views 182K
Comments 28

Тривиальные задачи по вёрстке

CSS *
image

Начинаю вести серию статей Это статья про вёрстку html css js, начинаю с самого простого, потом планирую описать более сложные вещи и всякие тонкости и этим видимо так и закончил

Читать дальше →
Total votes 275: ↑251 and ↓24 +227
Views 59K
Comments 160

300 потрясающих бесплатных сервисов

Web design *Typography *Interfaces *
Translation


Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly.com Domain: Конструктор веб-сайтов.
  • Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
  • Withoomph: Мгновенное создание логотипов (англ.).
  • Hipster Logo Generator: Генератор хипстерских логотипов.
  • Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
  • Invoice to me: Бесплатный генератор счета.
  • Free Invoice Generator: Альтернативный бесплатный генератор счета.
  • Slimvoice: Невероятно простой счет.

Читать дальше →
Total votes 341: ↑325 and ↓16 +309
Views 1.5M
Comments 107

Information

Rating
Does not participate
Registered
Activity