• Redux и MobX - плюсы и минусы, когда лучше что использовать?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Сразу скажу - не использовал MobX, но если вы читаете дальше - значит интересуетесь.
    Ответ про плюсы redux для меня лично - в самом конце.
    ---
    До React, писал на angular, и еще раньше на backbone. В ангуляр разработке у меня были места, которые я для себя объяснял: ок, так работает ангуляр (дайджест там, скоуп такой хитрый и т.д.) - факт был в том, что не все было прозрачно для меня лично.

    Начал разбираться с React и переписал часть рабочего проекта на React + Flux. В целом понравилось, но немного напрягало копирование однотипного кода. Появился redux, который (это важно) решил мою проблему. Все, тут я сделал остановку. Написал еще пару внутренних проектов - понравилось. Меня не напрягает ничего. Все уместно, код читается хорошо. Если я возвращаюсь к старому проекту - я очень быстро вникаю в "как это работает" и могу приступить к решению задачи.

    В процессе работы с Redux - появился Graph QL. Клево! Опять что-то новенькое - начал разбираться, и закрыл - так как быстро въехать не получилось, и попутно мне пришла простая мысль: зачем? Меня устраивает то, как работает связка React + Redux. Поэтому, я не стал вникать в saga, и пока что не хочется вникать в MobX. Возможно, это не правильно, ведь я их даже не смотрел, но свободное время от "вникания в новую технологию" я потратил на "дебри" технологий, которые активно использую.

    Поэтому, для себя я решил - в ближайшее время сидеть ровно на стуле, не скакать по технологиям и спокойно делать одно приложение за другим. До тех пор пока не появится какое-то недовольство текущим стэком.

    Главные плюсы redux для меня:
    + Если не трогал проект больше месяца - очень легко вспомнить что к чему.
    + Я пишу код. Я не вникаю в новое, я наращиваю знания по "старому" => я пишу быстро
    + Удобно тестировать

    Когда использовать:
    - когда хотите сделать одностраничное (SPA) приложение с нуля
    - когда хотите постепенно перевести старый проект на схему: вьюха (вся страница, или какой-то блок) + API запросы
    Ответ написан
    2 комментария
  • Зачем юнит-тесты JavaScript?

    @fetis26
    Ну, за фронтенд!
    То, что вы описали никак не относится к юнит-тестам. Это все интеграционное (функциональное) тестирование или просто недоработка как в случае с 0 шириной.

    Юнит-тесты проверяют работу модуля. Написав тесты вы фиксирует контракт модуля по отношению к другим частям системы. Если в ходе рефакторинга или доработки этот контракт вдруг неожиданно поменяется. Тесты вам про это сразу скажут. Т.е. они не нужны чтобы проверять что работает прямо сейчас, они нужны чтобы убедиться что все работает как задумано потом.
    Ответ написан
    Комментировать
  • Зачем юнит-тесты JavaScript?

    Rou1997
    @Rou1997
    Головой нужно думать, и понимать, юнит-тест не "запускает весь процесс" по определению, если весь процесс, то это функциональный тест, в некоторых случаях достаточно функционального тестирования.
    Ответ написан
    Комментировать
  • Что практичнее изучать ES6 или Typescript?

    TypeScript, так как Angular 2 развивается в его сторону.
    Ответ написан
    Комментировать
  • Какие есть обучающие ресурсы по фронтенд разработке?

    Alexey_Suprun
    @Alexey_Suprun
    Web Developer Blog - ссылка в описании
    codecademy.com попробуйте
    Ответ написан
    Комментировать
  • Какие есть обучающие ресурсы по фронтенд разработке?

    @Allan11
    Фронтенд
    Ответ написан
    Комментировать
  • Как эффективно изучать angular js?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    1) продолжаем учить "ванильный JS", паралельно почитывая про babel, es2015 и т.д.
    2) когда мы ищем информацию в интернетах - учитываем что сейчас актуальная версия ангуляра - 1.5, второй ангуляр в бете, так что 90% информации устарело. Я даже больше скажу - даже официальная документация устарела, обновленный вариант сможете найти на github проекта в пул реквестах.
    3) https://github.com/gdi2290/ngExam - рекомендую этот список тем того, что вам надо знать про ангуляр (ну и не только).
    4) https://github.com/AngularClass/NG6-todomvc-starter - тут я попытался собрать полезные статьи на тему что надо учить и как + пример маленького современного приложения. Так же в ишусах к NG6-starter обсуждается как лучше его готовить.
    5) https://habrahabr.ru/post/277087/ - про angular 1.5 и то как я готовлю ангуляр.

    Ну и так же не стоит пренебрежительно относиться ко всяким реактам и эмберам - идеология у всех приблизительно схожа, все крутые чуваки юзают компонентный подход (потому что это удобно и логично для проектирования интерфейсов), у всех примерно одинаковое виденье по поводу data-flow в приложениях и т.д. Так что с ними ознакомиться тоже можно, у реакта чуть больше расписано про компоненты например.

    Ну и да - обязательно прочитать документацию к ангуляру. Возможно не всю сразу но базовые понятия что бы раскрыть. И разобраться с тем что значит "декларативное представление".
    Ответ написан
    4 комментария
  • Как написать приложение на ios на js и html?

    @hellpirat
    Full stack developer (Python/Django, React.js)
    Ответ написан
    Комментировать
  • Какой ЯП выбрать для фронтэнда?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Но многие говорят, что с приходом webassembly javascript уже не будет так востребован.


    Те кто это говорят считают javascript плохим языком программированием и верят что есть хорошие. Не слушайте их.

    Javascript будет не "менее востребован", а просто перестанет быть "единственным" вариантом. webassembly просто позволит делать вещи, которые ранее делать было очень тяжело. Писать же приложения в 99% случаев будут всеравно на JS.
    Ответ написан
    11 комментариев
  • Какая либа сейчас есть для построения графиков?

    vawsan
    @vawsan
    Frontend Developer
    D3
    Ответ написан
    Комментировать
  • Как в Protractor'е организовать тестирование backend запросов?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    суть E2E тестов в тестировании всего, никаких моков и стабов (ну стабы можно для каких-то внешний сервисов типа фэйсбука, и то у них есть песочница). Что бы протестировать весь проход, от кнопок на UI до запросов в базу данных на сервере.

    В рамках интеграционных тестов тестировать UI так же смысла не имеет. UI должен быть декларативным, а это значит что там нет инвариантов которые нужно покрывать тестами. То есть по сути нам надо покрывать тестами только сервисный слой и возможно контроллеры.

    Если же вы уж очень хотите потестить UI в интеграционных тестах - ну ок, поднимите отдельный mock сервер которым вы будете управлять из тест сюиты. Благо их много.
    Ответ написан
    2 комментария
  • Как отслеживать прогресс Promise?

    Прогресс не просто так убрали из Promise, в большинстве случаев это антипаттерн.
    Нужно понимать что Promise A+ спроектированы так, чтобы инкапсулировать внутри себя всю связанную с операцией логику.
    Именно поэтому я не советую вам придумывать код, который требует методов Promise.progress, Promise.cancel или свойств Promise.isFullfilled, Promise.isRejected.

    Т.е. вы все еще можете пользоваться этими свойствами, но только не в контексте A+.
    Берите Q или любую легковесную замену, и реализуйте все что хотите через defer.
    Примером того, что вы получите в итоге может являться ответ @onqu

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

    Отменяйте промис только внутри него. Сообщайте об изменении состояния только с помощью then. Если вам нужно отслеживать прогресс загрузки чего либо, делайте это через события или каллбеки:

    function doSomethingAsync(timeout, cb) {
      var ee = new EventEmitter();
      var state = {
        progress: 0
      };
    
      (function loop() {
        if (state.progress === 22) return cb(null, state);
        if (state.progress === 'canceled') return cb(new Error('Action canceled'));
        if (state.progress * 1000 > timeout) return cb(new Error('Action timed out'));
    
        ee.emit('progress', state);
        setTimeout(loop, 1000);
      })();
    
      return ee;
    }
    
    
    function a20SecAction(actions = {}) {
      var maxActionTime = 20000;
    
      return new Promise((resolve, reject) => {
        var actionWithProgress = doSomethingAsync(maxActionTime, (err, result) =>
          (err ? reject : resolve)(err || result)
        );
    
        actionWithProgress.on('progress', actions.progress);
      });
    }
    
    a20SecAction({
      progress: (state) => console.log('state:', state.progress)
    }).then(
      (res) => console.log('state: ready'),
      (err) => console.log('state:', err)
    );


    Итак, если у вас есть действие, которое в любом случае должно завершиться, но вам нужно отслеживать прогресс (например загрузки файла), то не пытайтесь решить это на уровне промиса (A+) он вам не подойдет.
    В моем примере три этапа:
    1) Некоторая простейшая асинхронная функция оформленная в nodejs стиле, т.е. она принимает набор параметров и каллбек вида function (err, result) {}
    Это ваш минимальный строительный блок
    2) Функция обертка - более высокий уровень, на котором мы начинаем работать с промисом. Как параметры функция принимает обработчики дополнительных событий нашей операции. В данном случае у операции одно дополнительное событие progress, и два основных - fullfilled, rejected.
    3) Задаем обработчики для всех событий, основные обрабатываем в then, дополнительные через заданные параметры.
    В данном случае я оставил возможность влиять на процесс выполнения извне, внутри обработчика progress. Но лишь для демонстрации того, что это в принципе возможно. На практике лучше не допускать ситуации, когда изменение состояния асинхронной операции происходит извне:
    a20SecAction({
      progress: (state) => {
        console.log('state:', state.progress);
        if (state.progress === 7) state.progress = 'canceled';
      }
    }).then(
      (res) => console.log('state: ready'),
      (err) => console.log('state:', err)
    );


    Ну и в заключении, если у вас уже есть внешняя библиотека, которая предоставляет вам обычный промис для действия, которое может длиться 20 сек, а вам нужно иметь возможность наблюдать за прогрессом - меняйте библиотеку.
    Ответ написан
    2 комментария
  • Почему контроллер в AngularJS срабатывает два раза?

    @sashasoft Автор вопроса
    junior developer
    Ответ написан
    Комментировать
  • В чем ошибка AJAX или PHP?

    @vGrabko99
    html, css, js, php, golang, mysql
    как минимум в говнокоде. Вам тут не кто его разбирать не будет
    Ответ написан
    1 комментарий
  • Как научить WebStorm правильно работать с $index из директивы "ng-repeat"?

    AMar4enko
    @AMar4enko
    Все работает по чистой случайности. Как правильно заметил Николай, интерполяция там не нужна.
    menuCtrl.isSelected($index)
    Ответ написан
    1 комментарий
  • Что делать, если сторонний модуль использует слишком длинные имена?

    keksmen
    @keksmen Автор вопроса
    Just a programmer
    Проблема была решена путём копирования из dependencies используемого модуля некоторые модули в свой dependencies.

    Было:
    package.json
    {
      "dependencies": {
        "js-yaml": "^3.3.1",
        "yards-cli": "0.1.5"
      }
    }

    node_modules/module_name/package.json
    {
      "dependencies": {
        "тяжелый-модуль-с-длинными-именами": "0.0.7"
      }
    }


    Стало:
    package.json
    {
      "dependencies": {
        "js-yaml": "^3.3.1",
        "yards-cli": "0.1.5",
        "тяжелый-модуль-с-длинными-именами": "0.0.7"
      }
    }

    node_modules/module_name/package.json
    {
      "dependencies": {
        "тяжелый-модуль-с-длинными-именами": "0.0.7"
      }
    }


    Путём наблюдения было выяснено, что если некоторые модули из вашего dependencies и dependencies используемого модуля совпадают по имени и версии, то npm понимает, что нет смысла дважды устанавливать его т.к. используемый вами модуль сможет без проблем использовать перенесенный модуль следующим путем:
    require('module_name');

    Использовать осторожно: некоторые модули могут использовать файлы используемых модулей некорректно:
    require('./node_modules/module_name/path/to/file.js');

    Хотя, по факту, следующий код будет эквивалентным и более работоспособным в сложившейся ситуации:
    require('module_name/path/to/file.js');
    Ответ написан
    Комментировать
  • Что нового в Phalcon 2?

    @IceJOKER
    Web/Android developer
    Что нового? - нафига тут спрашивать когда есть оф. сайт? blog.phalconphp.com
    Какие отличия от 1.3.4? - Узнайте ответ на первый вопрос, это и будет ответом на этот вопрос
    Стоит ли переходить на новую версию? - стоит если вам подходит/нравится новая версия
    Ответ написан
    Комментировать
  • PHPStorm. Как отключить неотключаемые "Inspections: cannot resolve file"?

    miraage
    @miraage
    Старый прогер
    Подозреваю, что надо поставить require.js плагин.

    // upd

    DOWNLOAD PLUGIN
    Ответ написан
    1 комментарий