Перед тем как начать собирать с нуля Modern Web App нужно разобраться, что такое — Современное Веб-Приложение?

Modern Web App (MWA) — приложение, придерживающееся всех современных веб-стандартов. Среди них Progressive Web App — возможность скачивать мобильную браузерную версию на телефон и использовать как полноценное приложение. Так же это возможность листать сайт в оффлайне как с мобильного устройства, так и с компьютера; современный материальный дизайн; идеальная поисковая оптимизация; и естественно — высокая скорость загрузки.

Вот что будет в нашем MWA (советую использовать эту навигацию по статье):

• Universal Web App
• Material-ui
• Code Splitting
• Пример использования Redux
• Мобильная версия
• Progressive Web App
• Babel 7, Webpack и многое другое

Люди на Хабре деловые, поэтому сразу ловите ссылку на GitHub репозиторий, архив с каждой из стадий разработки и демо. Статья рассчитана на разработчиков, знакомых с node.js и react. Вся необходимая теория представлена в необходимом объеме. Расширяйте кругозор, переходя по ссылкам.

Приступим!

О механизме React по предотвращению возможности инъекции JSON для XSS, и об избегании типовых уязвимостей.

Давайте пофантазируем на тему функциональной композиции, а так же проясним смысл оператора композиции/пайплайна.

TL;DR
Compose functions like a boss:

Популярные реализации compose — при вызове создают новые и новые функции на основе рекурсии, какие здесь минусы и как это обойти.

Добрый день, дорогие друзья.

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

Итак, начнем.

Привет. 24–25 сентября в Москве прошла конференция фронтенд-разработчиков HolyJs https://holyjs-moscow.ru/. Мы на конференцию пришли со своим стендом, на котором проводили quiz. Был основной квиз — 4 отборочных тура и 1 финальный, на котором были разыграны Apple Watch и конструкторы лего. И отдельно мы провели квиз на знание react.

Под катом — разбор задач квиза по react. Правильные варианты будут спрятаны под спойлером, поэтому вы можете не только почитать разбор, но и проверить себя :)

Поехали!

В настоящее время разработка любого современного фронтэнд-приложения сложнее уровня hello world, над которым работает команда (состав которой периодически меняется), выдвигает высокие требования к качеству кодовой базы. Чтобы поддерживать уровень качества кода на должном уровне, мы во фронтэнд-команде #gostgroup идём в ногу со временем и не боимся применять современные технологии, которые показывают свою практическую пользу в проектах компаний самого разного масштаба.

import React, {Component} from 'react';
import {connect as vBooConnect} from 'react-validation-boo';
import {connect as reduxConnect} from 'react-redux';
import {InputBlock, InputCheckboxBlock, InputRadioGroupBlock, TextareaBlock, SelectBlock} from '../form/default';

class MyForm extends Component {
    constructor() {
        super();

        this.genderOptions = [
            {value: '', label: 'Ваш пол?'},
            {value: 1, label: 'Мужской'},
            {value: 2, label: 'Женский'}
        ];

        this.familyRadioList = [
            {value: 1, label: 'холост'},
            {value: 2, label: 'сожительство'},
            {value: 3, label: 'брак'}
        ];
    }
    componentWillMount() {
        this.props.vBoo.subscribe('change:input', this.props.onChangeVBooInput);
        this.props.vBoo.subscribe('valid:form', this.props.onChangeVBooValid);
    }
    render() {
        let s = this.props.myStore.inputs;
        return <Form connect={this.props.vBoo.connect}>
            <InputBlock name="name" value={s.name} />
            <InputBlock name="email" value={s.email} />
            <SelectBlock name="gender" options={this.genderOptions} value={s.gender} />
            <InputRadioGroupBlock name="familyStatus" items={this.familyRadioList} value={s.familyStatus} />
            <TextareaBlock name="comment" value={s.comment} />
            <InputCheckboxBlock name="addition" value="yes" checked={s.addition==='yes'} />

            <button onClick={this.sendForm}>
                {this.props.vBoo.isValid() ? 'Можно отправлять': 'Будьте внимательны!!!'}
            </button>
        </Form>
    }
}

export default reduxConnect(
    store => ({
        myStore: { // для наглядности
            isValid: false,
            inputs: {
                email: 'test@mail.ru',
                gender: 0,
                familyStatus: 1
            }
        }
    }),
    dispatch => ({
        onChangeVBooInput: (input) => {...},
	onChangeVBooValid: (isValid) => {...}
    })
)(vBooConnect({
    rules: () => ([...]),
    labels: () => ({...}),
})(MyForm));

import React, {Component} from 'react';
import {connect, Form, Input, logger} from 'react-validation-boo';

class MyForm extends Component {
    sendForm = (event) => {
        event.preventDefault();

        if(this.props.vBoo.isValid()) {
            console.log('Получаем введённые значения и отправляем их на сервер', this.props.vBoo.getValues());
        } else {
            console.log('Выведем в консоль ошибки', this.props.vBoo.getErrors());
        }
    };
    getError = (name) => {
        return this.props.vBoo.hasError(name) ? <div className="error">{this.props.vBoo.getError(name)}</div> : '';
    };
    render() {
        return <Form connect={this.props.vBoo.connect}>
            <div>
                <Input type="text" name="name" />
                {this.getError('name')}
            </div>
            
            <button onClick={this.sendForm}>
                {this.props.vBoo.isValid() ? 'Можно отправлять': 'Будьте внимательны!!!'}
            </button>
        </Form>
    }
}

export default connect({
    rules: () => (
        [
            ['name', 'required'],
        ]
    ),
    middleware: logger
})(MyForm);

О фреймворке в целом

Предисловие

Для начала представлюсь, меня зовут Эдик, я Full Stack Web Developer. Основные направления Laravel & React.js, Vue.js. Изучаю GoLang и Swift.

Хотя уже есть много других источников получения информации, книги остаются одними из самых распостраненных, но в них очень много воды и я решил не придумывать очередной костыль, а просто делать заметки.

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

Я пишу эти нотатки для себя и решил поделится ими со всем миром. Так что не будьте суровы. И так, поехали!

Глава 1. Добро пожаловать в React

React — популярная библиотека, используемая для создания пользовательских интерфейсов. Она была создана в Facebook чтобы решить ряд проблем, связанных с крупномаштабными сайтами.

Доброго времени суток!