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

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

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

<?php
echo 'Hello, world!';

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


Читати далі →

Помер MVC для фронтенда?


В цій статті хочу поділитися перекладом цікавих роздумів на тему минулого і сьогодення в архітектурі фронтенда.

У той час як все більше і більше фронтенд-розробників переймають підходи до односпрямованої архітектурою, виникає питання — чи є майбутнє у класичного MVC? Щоб зрозуміти, як ми дійшли до такого питання, давайте трохи проаналізуємо еволюцію архітектури фронтенда.

Читати далі →

json-api-normalizer: легкий спосіб подружити Redux і JSON API

JSON API + redux
останнім часом набирає популярність стандарт JSON API для розробки веб-сервісів. На мій погляд, це дуже вдале рішення, яке нарешті хоч трохи стандартизує процес розробки API, і замість чергового винаходу велосипеда ми будемо використовувати бібліотеки як на стороні сервера, так і клієнта для обміну даними, фокусуючись на цікавих завданнях замість написання сериалайзеров і парсерів в сто перший раз.

Читати далі →

Передноворічний реліз API і порталу Scorocode



Здрастуй, Хабр. З наступаючим тебе! Як і обіцяли, до кінця року оновили API і портал Scorocode.

Ключові нововведення:

  • (за численними проханнями трудящих) Відкрили API з управління додатком
  • Реалізували фабрику ботів Telegram
  • Оновили дизайн і функціональність порталу
  • Оновили документацію
І у нас акція!

Подробиці під катом.

Читати далі →

Оптимізуємо redux сховище для більш продуктивних змін

Цей пост є продовженням поста про оптимізацію продуктивності списку React додатку.

Увага. В цьому пості приклади підготовлені спеціально для Redux додатків. Але сам підхід можливо застосувати і з іншими бібліотеками. Так само нижченаведений рада працює у react-redux версії 5. Я не зміг досягти бажаного результату у версії 4. Глибоко розбиратися в причинах я не став.

І так, стандартний спосіб зберігати деяку множину елементів в додатку — це зберігати їх в масиві:

const state = {
targets: [{id: 'target1', radius: 10}, {id: 'target2', radius: 2}]
};

Читати далі →

Швидкий курс Redux + websockets для бэкендера

Це короткий керівництво і навчання фронтэнеду для бэкендера. В даному посібнику я вирішую проблему швидкої побудови інтерфейсу до серверного додатка у вигляді односторінкового веб-додатки (single page app).
Основною метою мого дослідження є можливість за розумний час (для одного нормального людини) отримати зручний і простий у використанні інтерфейс-чернетка до серверного додатку. Ми (як розробники серверної частини) розуміємо, що наш пріоритет — серверна частина. Коли (в гіпотетичному проекті) з'являться у фронті профі своєї справи, вони все зроблять красиво і "правильно".
В ролі навчальної задачі представлена сторінка чату з якимось умоглядним "ботом", який працює на стороні сервера і приймає повідомлення тільки через WebSocket. Бот при цьому виконує ехо ваших повідомлень (ми тут не розглядаємо серверну частину взагалі).
Читати далі →