Це друга стаття про 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);

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

Отже, прийшла пора швидко зануритись у тему. Для посилення ефекту, використовую різні техніки перетворення інформації в знання. Зокрема, уявляю конспект доповіді Олексія Андросова (старшого розробника інтерфейсів, Yandex).
Читати далі →

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



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

Читати далі →

Не займаючись ніколи раніше нативної розробкою під мобільні платформи, і в цей раз вирішив піти "легким шляхом" — освоїти React Native. Найбільшою трудністю стало додавання іконки додатка(AppIcon) і екрану завантаження (Launch Screen). Про що й хочу розповісти в цій статті тим, хто освоює React Native.
Читати далі →

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

<?php
echo 'Hello, world!';

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


Читати далі →

Це сталося в понеділок 13 лютого, світ більше не буде колишнім. Відкрита вакансія:

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

Огляд 5 найпопулярніших JavaScript-фреймворків 2017

Популярність JavaScript продовжує зростати. У 2016 році ми стали свідками великих змін з виходом повного апгрейда AngularJS і анонсом Angular 2, остаточного першості jQuery, який застосовують у 96,5% всіх JC сайтів, еволюції ECMAScript, двох оновлень Node.js у квітні та жовтні відповідно, і навіть більше того. Чого очікувати від 2017 року? Ось те, що ми знаємо до цього часу: Angular 4 очікується в березні 2017, випуск ES2017 планується в середині 2017, реліз Bootstrap v4 також очікується в цьому році.



Нещодавно JavaScript зайнятий місце серед кращих мов для вивчення версії IBM в 2017 році. На даному етапі він використовується, як для клієнтської, так і для серверної частини і допомагає проектувати привабливі інтерфейси, збагачувати веб-додатки численними функціями і фичами, редагувати веб-сторінки в реальному часі і багато іншого.

Читати далі →

Мобільна платформа. Як не боятися ReactNative

Перший пост блогу ми вирішили присвятити «мобільного» тематики і розповісти про розробку глобального рішення для запуску і створення додатків — «Мобільна платформа ЕФС».

Що це? Це многомодульный продукт, що дозволяє масово створювати мобільні додатки, тиражувати їх і підтримувати під час експлуатації.



Отже, що ми робимо по черзі і по пунктах.

Читати далі →