Це друга стаття про Server Side Rendering і ізоморфних/універсальних програмах на React. Перша під назвою "Спрощуємо універсальне/ізоморфне додаток на React + Router + Redux + Express" була більше про кастомное рішення, ця ж стаття націлена більше на тих, кому не хочеться морочитися, а хочеться готове рішення, з ком'юніті, і взагалі поменше головного болю з налаштуванням, налагодженням, підбором бібліотек і т. д.
+
В даній статті будемо розглядати Next.JS, який володіє перевагами у вигляді відсутності конфігурації, серверного рендеринга і готової екосистеми.
З коробки Next.JS не вміє працювати з Redux, тому в процесі написання пробного проекту я виділив отриманий загальний код в окремий репозиторій next-redux-wrapper, за допомогою якого в цій статті ми зберемо додаток-приклад на Next.JS + Redux.
Читати далі →

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

На Хабре вже було предостатньо статей про те, як робити універсальне (ізоморфне) додаток на стеку React + Redux + Router + Koa/Express (Google в допомогу), проте я помітив, що всі вони містять повторюваний код для серверного рендеринга. Я вирішив спростити завдання і виділити цей загальний код в бібліотеку, так і з'явився на світ react-router-redux-middleware, працює приблизно так:
import Express from "express";
import from config "./webpack.config";
import createRouter from "./src/createRouter";
import createStore from "./src/createStore";
import {createExpressMiddleware} from "react-router-redux-middleware";

const app = Express();
app.use(createExpressMiddleware({
createRouter: (history) => (createRouter(history)),
createStore: ({req, res}) => (createStore())
}));
app.use(Express.static(config.output.path));
app.слухати(port);

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



25 березня в Одесі відбудеться третя щорічна конференція JavaScript-розробників — JSLab. Наша команда FlyElephant допомагає з організацією цієї конференції і запрошує всіх взяти участь в ній.

В цьому році ми плануємо зібрати 250 front-end і back-end JS-розробників з України та близького зарубіжжя. Конференція пройде в два потоки, які будуть складатися з 12 доповідей по 45 хвилин і 8 бліц-доповідей за 10 хвилин.

Читати далі →

На чому робити фронтенд? Найвірніший спосіб знайти відповідь – спробувати кращі бібліотеки самостійно. В ідеалі добре б почати з самого простого і зрозуміти, як таємничі для необізнаного конструкції перетворюються в готові до висновку сторінки. Далі ж, озброївшись розумінням основ, можна осмислено читати документацію і ускладнювати власні експерименти до тих пір, поки відповідь не здасться очевидним.



Сьогодні ми поговоримо про React.js і Vue.js. Це – одні з найпопулярніших JavaScript-бібліотек у світі. Погляньте на список, подивіться їх репозиторії на GitHub. І та, і інша володіють вражаючими можливостями і служать для створення користувацьких інтерфейсів. Працювати з ними досить просто, головне – відразу зрозуміти, що до чого, зробити правильний перший крок. Власне кажучи, цього ось першого кроку в розробці з використанням React і Vue і присвячений даний матеріал.

Читати далі →

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

<?php
echo 'Hello, world!';

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


Читати далі →