Ответы пользователя по тегу Angular
  • Чем отличаются интеграционное, unit и e2e тестирование на frontend?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Как в юнит тестах тестить нажатие на кнопку? Или мы можем тестить только функцию-обработчик?


    В юнит тестах вы можете тестировать контроллер компонента, что мол он нужное состояние выставляет. DOM проверять не нужно. Механизм биндингов и так хорошо покрыт юнит тестами на уровне фреймворка. Чаще юнитами покрывают сервисы, ресолверы и прочее. Ими проверяют логику работы отдельных маленьких кусочков.

    в интеграционных можно уже потихоньку проверять DOM отдельных компонентов. Просто потому что вы могли опечататься при написании биндингов. Ну то есть цель интеграционных тестов - проверить что в сборке компоненты работают.

    В e2e (end to end) вы загружаете все приложение целиком и имитируете действия пользователей. Причем взаимодействие происходит насквозь. От кнопочки в браузере до запросов в базе данных на сервере (если есть бэкэнд). Это самый медленный вид тестирования и им стоит покрывать только позитивные сценарии.

    Читать про пирамиду тестирования.
    Ответ написан
    Комментировать
  • Как добавить ассеты в NG6-starter?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Все никак не дойдут руки причесать его. На сегодняшний день этот стартер чутка устарел.

    1. Не поддерживается. Рекомендую вооружиться webpack-copy-plugin и вперед.
    2. Нельзя. Для этого вам стоит смотреть в сторону system.js + http2.
    3. Читайте документацию к webpack.
    Ответ написан
    7 комментариев
  • Как использовать factory как хранилище данных между контролерами?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    1. "factory" это способ порождения сервиса. То есть хранить данные вы будете в сервисе. Ну и такой момент - вы там не храните данные а храните логику получения этих данных.
    2. почитайте про анонимные функции, не надо указывать имена для колбэков
    3. почитайте про промисы, это решит вашу проблему. Так же почитайте про event loop в javascript, про то как работать с асинхронными операциями и т.д.
    4. Очень удобно такие вещи выносить в резолверы, оставляя контроллеры максимально тупыми
    5. компоненты. Подход с регистрацией "независимых контроллеров" считается устаревшим.

    Последние два пункта обязательны к изучению но не прямо сейчас. Это если вы захотите научиться делать "удобно".
    Ответ написан
    1 комментарий
  • Использовать ли Angular2 если важна поисковая оптимизация?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    https://github.com/angular/universal

    и стартер кит от автора (входит в кор тим ангуляра) сего решения: https://github.com/angular/universal-starter

    Вопрос с "объемностью" ангуляра решается шейкингом с большего. Так что на скорость загрузки сайта сильно влиять оно не должно (если сверху еще и gzip-ом приправить). Как никак это один из важных показателей для SEO.
    Ответ написан
    5 комментариев
  • Как спроектировать такое?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    промисы. Они даже есть нативно в последних версиях топовых браузеров.
    Ответ написан
    2 комментария
  • Создать простую админку?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    но можно ли на чистом джс такое сделать?


    Можно. Angular (или чего попроще) + firebase и вперед. Для вашей задачи - норм.
    Ответ написан
  • Стоит ли использовать Angular2 с ES6?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Собственно могу ли я обойтись ES6 при работе с Angular


    Можете, вопрос в рациональности.

    Хоть код на TS отличается не сильно, он все же отличается. А так как большая часть учебных материалов по ангуляру все же будет на TS - то стоит задуматься. Да и не так плох TS.
    Ответ написан
    Комментировать
  • Как передать данные из сервиса в контроллер в режиме реального времени?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    class ChatComponent {
       constructor(messages) {
           this.messages = messages;
           this.list = [];
       }
    
       $onInit() {
           this.messages.list().then(
              (list) => this.list = list;
           );
    
           this.messages.onNewMessage((message) => {
               this.list.push(message);
           });
       }
    }
    
    angular
      .module('app')
      .component('messageList', {
        controller: ChatComponent,
        templateUrl: 'chat/messages.html'
    }


    короч мораль - не делайте костылей. Передавайте вещи явно, можете через ивенты, можете еще как, можете наполнять список меседжей прямо из сервиса:

    class MessagesListComponent {
    }
    
    module.component('messageList', {
        bindings: {
            messages: '='
        },
        controller: MessagesListComponent 
    }
    Ответ написан
    Комментировать
  • Как в Angular вывести диапазон элементов?

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

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    есть в ангуляре такая штука как ngPluralize. Можно копать в этом направлении.
    Ответ написан
    Комментировать
  • AngularJS - зачем оборачивать service`s в factory?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    функции Login, SetCredentials и т.д. являются методами сервиса AuthenticationService.

    Фабрика - это способ задания сервиса. Разница между .service и .factory лишь в том, что в первом случае вы засовываете конструктор объекта, а во втором - функцию фабрику которая сама разберется как объект создавать.

    // вот сервис
    function MyService (dep1, dep2) {
        this.dep1 = dep1;
        this.dep2 = dep2;
    }
    
    // А вот фабрика этого сервиса
    function myServiceFactory(dep1, dep2) {
    
        return new MyService(dep1, dep2);
    }
    
    // в результате в контейнере зависимостей будет крутиться
    // 2 инстанса одного и того же сервиса. То есть одинаковый результат
    // при двух подходах.
    module.service('foo', MyService)
    module.factory('bar', myServiceFactory);


    В вашем примере фабрика используется баналь потому что надо где-то сделать объект и для этого используется "модуль". Ну мол для инкапсуляции и т.д. Что бы не экспоузить зависимости вашего объекта никому. Ну а Object.create просто для слабых духом.
    Ответ написан
    Комментировать
  • Зачем в Angular есть Jsonp?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    1) Jsonp был с самых ранних версий angular
    2) angular на момент выхода версии 1.0 имел поддержку ie8 как минимум
    3) поскольку angular 1.x не может иметь значительных нарушений обратной совместимости - нельзя просто так удалять jsonp.
    Ответ написан
    2 комментария
  • Можно ли использовать as в temlate?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    есть ng-init но думаю что вам нужно что-то другое. Я обычно делаю такие элиасы на уровне контроллеров компонентов. Ну и в целом ваше желание больше похоже на то, что у вас есть кусок шаблона, который выгоднее было бы выделить в отдельный компонент.
    Ответ написан
    1 комментарий
  • Использование getter снижает производительность приложения?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    новых циклов $digest конкретно геттер не вызывает.

    В вашем же примере на каждый вызов геттера формируется абсолютно новый массив, и сравнение по ссылке он завалит. При этом сравнение это происходит на каждый $digest цикл. То есть на каждый $digest цикл (при отсутствии deep watch) будет происходить запуск ватчеров. Это единственный риск поскольку избавиться от этого можно только через deep watch а вот эта штука уже серьезно так бьет по производительности.

    Ну и это не говоря о том что на каждый $digest цикл будет дергаться ваш сервис. Вместо этого стоило дергуть сервис один раз и заменять данные в контроллере только тогда когда нужно.

    Если брать современные подходы, то мы вообще должны вынести все получение состояния из контроллеров (компонентов) наружу, например в ресолверы и мэпить все на проперти компонентов. Там уже геттеры/сеттеры хорошо подходят, но только те геттеры/сеттеры которые на уровне языка а не "методы". Это легче тестить, проще поддерживать и в целом открывает большой простор для дальнейшей архитектурной вакханалии.
    Ответ написан
  • Как правильно сделать раздельно front на angular и back на laravel?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Полистал немного ответы в сети, но что-то как-то всё размылено.


    бэкэнд отдельно, фронтэнд отдельно. Можете даже в отдельные репозитории это дело запихнуть что бы понятнее было. Общение - по HTTP API (JSON RPC, REST, что-хотите). И никаких проблем, никакой каши.
    Ответ написан
    Комментировать
  • Построение приложения frontend, что выбрать?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Возьмите Angular 1.5. Он значительно проще зоопарка из React, на нем так же можно делать все компонентами (не ну можно и как в Angular 1.0 клепать жирные контроллеры но это ничего кроме боли не приносит), полно учебных материалов (опять же из недостатков тут - адекватность материалов, большинство ориентировано на подходы, которые были адекватны в 12-ом году) и при этом переход на angular2 будет потом не таким болезненным.

    Что до typescript - он не очень сильно отличается от javascript (если мы говорим про ES2017 stage1 какой а не ES5.1).

    В целом angular2 имеет смысл использовать для реально больших приложений. Для маленьких будет довольно приличный оверхэд, да и наличие маленьких самодостаточных библиотек для построения приложений на сегодняшний день спасает.
    Ответ написан
    Комментировать
  • Почему не так часто используют JS фреймворки?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    очему так мало сайтов в рунете используют данные фреймворки?


    потому что это сайты. Потому что поисковики должны индексировать контент. Потому что это рунет. Потому что 90% разработчиков не достаточно квалифицированы что бы эффективно делать Single page Application-ы. Потому что 80% рунета сделано на wordpress/joomla/dle/etc. Ну как-то так.

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

    Для всего этого есть решение - серверсайд пререндеринг. Делают его обычно либо при помощи сторонних решений в клауде (что обходится обычному блогеру/интернет магазинчику не дешево или тупо много рисков), которые так же не всегда безболезненно юзаются, так и на сервере средствами node.js. Причем популярность этот подход начал набирать в 2013-ом году с появлением react и концепцией виртуального дома (использовали и раньше, тот же твиттер). Причем в том же react это все еще не самая тривиальная задача сделать все так что бы небыло боли. Пока лидером в плане безболезненной реализации является Angular2, которому помогает dependency injection и километры абстракций. Но только он еще не вышел даже в релиз (хотя все уже фигачат на бете). Ну и опять же на "шаред хостинге" это не взлетит (с оговорками опять же, я встречал те где это можно провернуть без боли).

    С каждым же годом количество SPA увеличивается. Со временем большая часть людей перейдут на похожие подходы. Опять же есть еще здравый смысл. Например пилить лэндинг на всяких там реактах или ангулярах или vue - это оверхэд. Тут и ванильного джаваскрипта хватит.
    Ответ написан
    2 комментария