Кожен раз починаючи писати React додаток, ви так чи інакше виберіть якийсь варіант:
  • копі-паст вашого попереднього проекту
  • якийсь бойлерплейт або навіть генератор (типу Yeoman)
  • готовий фреймворк не вимагає конфігурації
  • пишете самі все з нуля
Кожен із способів має свої сильні і слабкі сторони, як на довгому, так і на короткій дистанції.
Деякі рішення приховують складність на початку, дозволяючи зробити швидкий старт. Це щось подібне рішення під ключ, але в результаті такі рішення можуть виявитися недостатньо гнучкими і складними в підстроюванні. З іншого боку, на початку все може здаватися злегка монструозным і неповоротким, і щоб почати потрібно трохи повозитися, але зате потім переваги стануть очевидними. Завжди є можливість зробити все з нуля, рівно так, як хочеться, але в такому випадку Ви будете відповідати за незліченні аспекти і Вам будуть потрібні глибокі знання у всіх що беруть участь технологіях.
Читати далі →

Ви напевно думаєте, що писати на php — це просто. Та «hello, world» виглядає приблизно так:

<?php
echo 'Hello, world!';

Звичайно, чого ще очікувати від мови з низьким порогом входу. Ну так, саме так і було раніше. Багато років тому. Але тепер, у 2017 році ніхто вже так не робить. Давайте розглянемо, чому і спробуємо побудувати наше більш реалістичне hello-world програму по кроках, а їх, скажу відразу, вийшло не мало.


Читати далі →

Angular 1.x: скрадливий webpack, що крадеться grunt

Історія про те, як ми поміняли складання проекту з grunt на webpack
Приходиш на роботу, відкриваєш IDE, пишеш
npm start
, запускаючи систему збирання, починаєш працювати. Тобі зручно орієнтуватися в структурі проекту, зручно налагоджувати код і стилі, очевидно, як саме і в якому порядку збирається проект.

Проходить два роки. У процесі розробки періодично замислюєшся, куди правильно покласти файли з новим модулем, як бути з загальними ресурсами, і не завжди з ходу відповідаєш на питання джуніора «а яким чином цей файл взагалі потрапляє в бандл?». Чи відповідаєш сакральне «так історично склалося» і сумуєш за тим, що було два роки тому.

Як з'ясувалося, таке трапляється, якщо не модернізувати систему складання разом із зростанням проекту. Хороша новина в тому, що це успішно лікується! Влітку ми підтвердили це в бою і хочемо поділитися досвідом.



Читати далі →

Перший офіційний реліз Webpack 2. Що нового в порівнянні з Webpack 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;
  • Новий сайт з документацією.
Подробиці під катом.
Читати далі →

Webpack в Visual Studio для великих солюшенов

КПДВУ нас в солюшене 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
    в папку кожного залежного проекту

Читати далі →

Шлях джесая, частина перша: typescript, webpack, jsx, custom elements...

Ну що, мальчиші і хлопці, а чи не пора вам пізнати джесай до? Не, ну вам то ще рано, а я ось, мабуть, почну. Але ви можете приєднатися.

У низці останніх статей про jsx/react та інше я спостерігав намотування соплів на кулак та інші непотребства в обговореннях, мовляв як же нам без бабеля, а навіщо нам jsx та інше малодушничание. Будемо припиняти. Сьогодні ми будемо будувати webpack, прикрутимо до нього typescript і jsx без реакта, зберемо на tsx custom element без бабеля, зарегаем його і виведемо на сторінці. Багато хто з вас сьогодні подорослішають, а деякі, можливо, навіть стануть чоловіками.
Якщо ви боїтеся що світ для вас ніколи вже не буде колишнім — не бійтеся, він колишнім ніколи і не був, так що заходьте…

Читати далі →

Черговий метод знизити обсяг SPA програми (webpack)

Так вже сталося, що останнім часом мені доводиться освоювати нові інструменти. Черговим таким інструментом став webpack.
Інструмент цікавий, але після переїзду з Google Closure * для мене стало загадкою, чому webpack не утискає імена класів, як це робить Google Closure Stylesheets.
За день, на коліні, мною був написаний plugin який цілком не погано реалізував цей функціонал.
Більш докладний опис нижче.

Читати далі →

Як переписати SDK на TypeScript, оновити платформу і ні про що не шкодувати

image

У нас нова версія WebSDK – v4. Поки це тільки public beta версія, але вона вже стабільна для більшості повсякденних кейсів. Ми намагалися зберегти зворотну сумісність нової версії.
А ще оновлена платформа – v3. Там багато всього нового і цікавого. Все працює швидше і веселіше. Про подробиці нижче.
Як бачите, у нас дабл страйк! Під катом – що вийшло за 6 місяців перехресного дебага, безперервного поліпшення і болю. Спойлер: більше ніякого стародавнього Flash. Тільки чистий WebRTC + ORTC.
Читати далі →

Додаток на Elm за лічені секунди

Сучасна розробка браузерних додатків стала надто складною. Не стільки завдяки цій алгоритмічної складності, скільки завдяки достатку підходів для цієї самої розробки.
Наявність великого вибору — добре, але не завжди допомагає продуктивності. Розробники цінні, в першу чергу, умінням писати корисний для бізнесу код. Проблема в тому, що код — це лише частина програми. Кодом супроводжує інфраструктура безлічі інших інструментів, що допомагають розробнику виробляти цей код.
We need opinionated tools that take care of configuring dev and prod so you can focus on the app. They will come. Give it a year.  Dan Abramov (@dan_abramov) January 26, 2016


Читати далі →