Контакты

Достижения

Все достижения (12)

Наибольший вклад в теги

Все теги (31)

Лучшие ответы пользователя

Все ответы (25)
  • Webpack. В чем разница между бандлом, чанком и модулем?

    alexfedoseev
    @alexfedoseev
    React & Rails Dev
    Есть два бандла:

    • app.js — для морды
    • admin.js — для админки


    В каждом бандле есть вендорные модули (react, ember, jquery etc.). И модули приложения (то, что написано тобой).

    Каждый бандл можно разбить как минимум на два чанка: собственно приложение и вендорные либы (чтобы пользователь при апдейте приложения не грузил заново вендорные библиотеки, которые не менялись). А если приложение очень большое, то бандл разбивается на ещё больше чанков: например чанк для интерфейса личных сообщений, чанк для ленты новостей и т.д. Такие чанки грузятся по запросу (когда пользователь переходит на соответствующий раздел / интерфейс).
    Ответ написан
    2 комментария
  • Как сделать серверный рендеринг на React?

    alexfedoseev
    @alexfedoseev
    React & Rails Dev
    index.html — его быть не должно.

    Должен быть шаблон (jade, handlebars, whatever), в который:
    • через переменную вставляется DOM от реакта (результат React.renderToString);
    • после него через тег script подключается файл приложения (bundle.js)


    Сервер рендерит этот шаблон и отдает html с клиентским приложением на клиента.

    bundle.js.map — это SourceMaps, их в production быть не должно, оно убирается через настройку Webpack.

    Роутинг

    Если это SPA:

    import express    from 'express';
    import React      from 'react';
    import Router     from 'react-router';
    import Location   from 'react-router/lib/Location';
    
    import App        from '/path/to/App';
    import routes     from '/path/to/routes';
    
    
    const app = express();
    
    app.use(express.static(path.join(__dirname, 'public')));
    
    app.use('/', middleware);
    
    function middleware(req, res, next) {
      
      const location = new Location(req.path, req.query);
      
      Router.run(routes, location, (error, initialState, transition) => {
        
        const body   = React.renderToString(<App {...initialState} />);
        const layout = `${process.cwd()}/path/to/layout.jade`;
        const html   = Jade.compileFile(layout, { pretty: false })({ body });
        
        res.send(html);
        
      });
      
    }


    Если это статика:

    import express  from 'express';
    import React    from 'react';
    
    import Main     from 'components/Main';
    import About    from 'components/About';
    
    
    const app = express();
    
    app.use(express.static(path.join(__dirname, 'public')));
    
    app.get('/', (req, res) => middleware(req, res, Main));
    app.get('/about', (req, res) => middleware(req, res, About));
    
    function middleware(req, res, Component) {
      
      const body   = React.renderToString(<Component />);
      const layout = `${process.cwd()}/path/to/layout.jade`;
      const html   = Jade.compileFile(layout, { pretty: false })({ body });
      
      res.send(html);
    
    }


    /* Jade Layout */
    
    doctype html
    html
      
      head
        // head stuff...
    
      body
        #app!= body
        script(src="/bundle.js")
    Ответ написан
  • Разные данные из Analytics и Metrics - кому верить?

    alexfedoseev
    @alexfedoseev
    React & Rails Dev
    Расхождение в кол-ве юзеров по размеченному трафику — меньше 1,5%. Это нормально для внешней js-аналитики. По органике — нужно сегментировать и смотреть распределение по срезам, где разница => почему она есть.
    Сессии — аналогично, нужно смотреть под капот, по этим цифрам ничего не скажешь.
    Отказы в G и Я — это разные сущности, почитайте доки. Они никогда у вас не будут совпадать.
    Тайминг и JS — принимайте его как 5-е приближение к реальной медиане.

    В общем, эти цифры бесполезны, если вы хотите получить ответы откуда дельты. Нужен сайт, нужен GA, нужна Метрика. Садиться и копать.
    Ответ написан
    Комментировать
  • Стоит ли отказываться от JS в мобильных версиях сайта?

    alexfedoseev
    @alexfedoseev
    React & Rails Dev
    Как правильно делать: рендерить первоначальный html на сервере -> отдавать его клиенту с JS-приложением -> JS-приложение после загрузки первоначального контента забирает дальнейшее управление на себя.

    См. дальше по запросам «изоморфный javascript», «isomorphic javascript».

    Выпилить JS из сайта — это вернуться на пару десятков лет назад. Вас утопят в выдаче поведенческие факторы, в то время как разумное использование JS эти поведенческие факторы улучшит (=> поднимет в выдаче). Главное на мобильных с JS не переусердствовать.

    P.S. Google бот уже рендерит (и, соответственно, индексирует) SPA, которые без рендеринга на сервере, но позиции по ним, думаю, ниже чем у аналогов с серверным рендерингом. Плюс из соображений скорости первоначальный html лучше собирать на сервере.
    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (12)