Как стать автором
Обновить

Комментарии 34

Предлагаю еще посмотреть в сторону webpack, сам раньше всегда использовал requirejs, но оказалось что писать загрузку модулей с commonjs удобнее и красивее
мне CommonJS тоже нравится больше, однако мне почему-то жутко не нравится куча var-ов на каждую переменню. Одна var на все эти переменные тоже не сильно нравится… :) Вот import из ES6 было бы круче всего, как по мне.
можно взять 6to5, 6to5.org/docs/usage/modules/ там все это есть :)

а с кучей var тоже просто.

var React = require('react'),
Component = require('./component')

:)
вот к 6to5 тоже присматриваюсь, а вот с одним var все-равно выглядит не красиво в моем понимании :) уж сильно отдает паскалем как-то… уж эстет я, извините :)
Смотрите в сторону DI (dependency injection) менеджера, чтобы избавиться от var'ов, получить более элегантый и удобный для тестирования код.

Вот простой пример:
/** @jsx React.DOM */

let appRenderInit = (app, window, $, React, Hello, World, undefined) => {
  'use strict';

  return (element) => {
    var Index = React.createClass({
      render() {
        /* ... */
      }
    });

    React.render(<Index />, element);
  };
};

export default appRenderInit;


Code source.
Офигенно, спасибо!
НЛО прилетело и опубликовало эту надпись здесь
Спасибо, обязательно посмотрю.
Заголовок был многообещающим, а по факту не понятно как вы собираетесь передавать данные из моделей, будете ли использовать Бекбон вью и т.д.
нуб-вопрос про весь этот реакт/ангуляр/эмбер:
получается что вся страница собирается уже на клиенте, как обстоят дела с индексацией роботами и как увидят сайт пользователи, например ИЕ8 (да, приходится поддерживать)
Если вы специально не позаботились, то роботы ничего не увидят.

Поддержки IE8 в Ангулар нет, в Реакте через полифилы и придется шаблоны прекомпилять. Про Эмбер не знаю. Если кратко, то очень плохая. Но на мой взгляд это закономерно.
Информация касательно индексации таких приложений яндексом.
По ссылке:
Каждая индексируемая AJAX-страница должна иметь HTML-версию

Другими словами: яндекс не умеет индексировать ajax (да и просто сгенерированные на клиенте) страницы.
Получается что так. Логику подстановки данных в html шаблон придется реализовывать в двух местах, на клиенте для людей и сервере для Яндекса, Google и т.д.
Кстати, если ваша серверная часть написана на node.js, можно реализовать пререндеринг страниц на стороне сервера.
Можно рендерить на бекенде страницы, а потом поверх запускать фронтэнд приложение. По крайней мере так на backbone делаем
prerender.io в помощь
>>Всё и сразу пока не работает.
Убило наповал. Зачем статья?

Зачем тащить было в проект Backbone и requirejs? Обоснование отсутствует. Вы не понимаете Flux, поэтому притащили в проект Backbone? Или в нем есть необходимость, потому что Flux не устраивает этим и этим?

React + Flux + 6to5 + webpack избавляет от прошлого века requirejs.

Фига себе прозрачность в контроллерах Backbone находятся компоненты React.
А насколько у webpack хорошо с компиляцией в рантайме? Я вот поставил requirejs с jsx плагином и могу все на живую компилировать, никаких watcher'ов и т.п., webpack же, насколько я понимаю, заставит меня через свой сервер ходить для этого.
Если вы не хотите использовать watcher-ы, то это ваши проблемы. Можете не использовать.

Можно компилировать наживую, через watcher-ы, через watcher wabpack или запускать webpack для сборки. Как настроите так и будет.

Я совсем не использую requirejs т.к. это устаревшая технология, уже можно использовать es6 и es6 модули. Если проект новый и нет предрассудков и каких-то страхов, то зачем использовать устаревшие инструменты, когда есть современные?
Я не совсем согласен насчет «устаревшей» технологии, не так все плохо… Плюс он спокойно расширяется через модули и прикрутить туда компиляцию es6 никакого труда не составляет. А бонусы от компиляции в рантайме при этом остаются.

Я переформулирую вопрос — какие webpack предоставляет возможности для быстрой компиляции в режиме «изменил-сохранил-посмотрел в браузере», насколько быстро он успевает все подхватить и перестроить для средних размеров проекта? Для меня важно, чтобы инструмент успевал отработать за то время, пока я переключаюсь из редактора в браузер и пока обновляется страница.
У меня проект среднего размера, React + Flux + Webpack, при изменении файла автоматически пересобирается проект. Первая сборка забирает где-то 4.5 секунды, а все последующие 3.7. После сборки срабатывает autoreload. В принципе поменять что-то в коде и переключится в браузер — достаточно приемлимая скорость. Хотя я бы и сам не отказался бы от того, чтобы её ускорить.
У меня есть ноут, на котором сборка чего угодно, на чем угодно занимает 10 минут.
Вот я по этой самой причине (сборка дольше 3 секунд) и пришел к выводу, что я хочу все компилировать прямо в браузере, потому как пару раз ловил неприятные баги от того, что после переключения в браузер что-то успело собраться, а что-то нет.
>> сборка дольше 3 секунд
Вот по этой причине я и пришел к выводу, что прекомпиляция по частям и нормальные компьютеры спасут мир. Болтовня про скорость — чушь! Я таких разговоров ещё 10 лет назад наслушался. Прошло 10 лет, частота процессоров выросла на тысячи, появились SSD, а разговоры не изменились. Прямо маркетинговые лозунги — мой инструмент умеет быстро*.

На первом месте стоят возможности инструментов, скорость только на втором. Попробуйте SSD, может вам полегчает.

*, зато не имеет ещё 100500 нужных возможностей.
Вы забываете, что размер проекта тоже растет. На проекте более тысячи файлов. И SSD есть почти у всех девелоперов, коих по последним подсчетам более ста человек. Вы так замечательно все додумываете, колкие фразочки пишете, а по существу ничего так толком и не сказали.
Что я должен сказать по существу о вашем абстрактном проекте, вашей абстрактной сборке на вашем абстрактном компьютере?
Например, вы могли бы рассказать о статистике на Вашем не-абстрактном проекте, Вашей не-абстрактной сборке на Вашем не-абстрактном компьютере. Например, как это сделал standy.
Не знаю откуда такие цифры, если использовать webpack.watch, то все ускоряется на порядок.

У меня проект, где react собирается из исходников (это 500кб кода), несколько входных точек и общие модули выделяются в отдельный файл, дев-сборка (без минификации) происходит за 3с. Сборка с минификацией и с дедупликацией за 12с. После этого watch отрабатывает за 200мс любое сохранение.
Проект весит 20 мегабайт… тут знаете ли приходится выдумывать всякое, и как разделить его на динамически подгружаемые модули и как собрать максимально быстро.
>>насколько быстро он успевает все подхватить и перестроить для средних размеров проекта? Для меня важно, чтобы инструмент успевал отработать за то время, пока я переключаюсь из редактора в браузер и пока обновляется страница.
У меня успевает, нареканий не было, проект большой и растет, но не вижу смысла обсуждать скорость webpack.

Любой инструмент упрется в скорость при росте проекта. Поэтому всегда использую вотчеры, которые сильно ускоряют процесс сборки. Считаю это оптимальным решением.

Как можно обсуждать скорость, не зная мощности компьютера, других инструментов, технологий и т.д. Абстрактные кони в вакууме и то нагляднее.

Вы же понимаете, что пока не попробуете сами ничего не узнаете наверняка?!
Вы же понимаете, что пока не попробуете сами ничего не узнаете наверняка?!


Логично. Но пока я буду переводить основной проект с тысячами файлов на webpack пройдут недели, а самое плохое — испытание на малом кол-ве файлов показательным не особо будет, так что прогнозировать, как оно заработает на большом проекте довольно трудно. Поэтому нужен чужой опыт.
>>пока я буду переводить основной проект с тысячами файлов на webpack пройдут недели
Не знаю почему, но вам видней. Расскажите в чем проблема?
webpack.github.io/docs/comparison.html
На проекте используются requirejs плагины, а также не весь сайт собирается разом, он разбит на составные части, у которых собственный билд-процесс. Чтобы все нормально перевести на вебпак и протестировать придется потратить некоторое время, поэтому на данный момент я провожу анализ, стоит ли игра свеч.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории