• Как тестировать бандлы, собранные через Webpack?

    alexiusp
    @alexiusp
    senior frontend developer
    Как верно указано выше, юнит-тестирование (основной источник метрики "покрытие") проводят до сборки бандла. Для реакта лучше всего подходит Jest от тех же разработчиков. Jest умеет генерировать отчёты о покрытии самостоятельно, дополнительных инструментов для этого устанавливать не нужно.

    Лучше всего вам будет обратиться к одному из готовых starter-pack, в которых вся система сборки (в вашем случае webpack), и тестирования уже настроена и готова к использованию, и посмотреть как там это сделано.

    После сборки выполняются e2e тесты, для этого используются инструменты, вроде указанных выше Puppeteer, Protractor, или ещё можно добавить сюда Selenium и Nightwatch.
    Ответ написан
    Комментировать
  • Как проанализировать код большого проекта на PHP на наличие неиспользуемых кусков кода и файлов?

    alexiusp
    @alexiusp
    senior frontend developer
    Мы используем SonarQube для подобного рода анализа кода, заодно и покрытие тестами контролируем и возможные проблемы в безопасности: https://www.sonarqube.org/
    Ответ написан
    Комментировать
  • Как защитить отдельные api роуты используя jwt?

    alexiusp
    @alexiusp
    senior frontend developer
    можно поставить авторизацию первой, но вместо отправки ошибки авторизации сразу из мидлвари, это сделано в приведённом примере, делать обработку ошибок в каждом из защищаемых роутов.
    т.е. мидлварь только проверяет наличие и правильность токена и дописывает к запросу параметр user (например), а роут смотрит, если ему требуется авторизация а поле user пусто - возвращает ошибку, а если авторизация не нужна, то и поле это не проверяется.
    я такой подход видел как раз в каком-то туториале по паспорту и монгодб.
    Ответ написан
    Комментировать
  • С чего подступиться к бекенду?

    alexiusp
    @alexiusp
    senior frontend developer
    я бы предложил не забивать раньше времени голову азами, хотя без этого конечно в итоге не обойтись. И не начинать с бэкенда. Попробуйте сначала сделать сайт с более-менее инетересным фронтендом (хотя бы игру крестики-нолики или что-то такое) безо всякого бэкенда. Выложите этот сайт на хостинг. Думаю до сих пор должны существовать бесплатные варианты хостингов, где можно статичные странички выкладывать. Пока будете выкладывать эту свою страничку на сервер вы заодно познакомитесь, как оно это всё приблизительно работает в плане хостинга. Как сервер отдаёт файлы. Чем отличается URL, по которому вы страничку открываете от пути, где лежит ваша страница на сервере. Ну а потом уже потихоньку начнёте соображать, что вместо статичной странички сервер может и какие-то произвольные данные отдавать. И понеслось.
    Ответ написан
    Комментировать
  • Ваша мнение о модульном react/redux?

    alexiusp
    @alexiusp
    senior frontend developer
    Мне кажется всё зависит от масштабов.
    Если у вас две-три странички в приложении, то делать для каждой кнопки и каждого компонента свои файлы с экшнами, редюсерами и стейтом - лишний гемор.
    А вот если приложение достаточно масштабное и хорошо делится на более-менее обособленные модули, то для этих модулей вполне логично сделать свои отдельные экшны, редюсеры и стейт, сложить всё это в отдельную папку, а в перспективе можно этот модуль и в отдельный бандл вынести и ленивую загрузку прикрутить.
    Нужно помнить, что программирование должно решать проблему сложности, т.е. уменьшать эту самую сложность. Если с увеличением файлов сложность растёт - вы что-то делаете не так.
    Ответ написан
    Комментировать
  • Какие задачи (сайты) лучше всего реализовать на MEAN стеке?

    alexiusp
    @alexiusp
    senior frontend developer
    Я думаю, что "синтетических" проектов чисто для "портфолио" делать не стоит.

    Лучше либо найти заказчика, который поверит на слово в ваши навыки и потом этот проект в портфолио вставлять, либо сделать несколько простеньких задач в стиле игры крестики-нолики, чтобы только показать уровень освоения выбранного стека, ну или попросить потенциальных заказчиков поставить вам тестовую задачу, что-то вроде coding challenge. Тогда и они смогут убедиться в ваших навыках и вы будете лучше ориентироваться в том, что именно интересует ваших потенциальных заказчиков.
    Ответ написан
    Комментировать
  • 2 запроса в SPA приложении?

    alexiusp
    @alexiusp
    senior frontend developer
    конечно нужно разные сущности разными запросами получать. это и с архитектурной стороны правильнее и с точки зрения отзывчивости страницы.
    Ответ написан
  • В чем суть лучшего паттерна написания кода с отловом всех ошибок?

    alexiusp
    @alexiusp
    senior frontend developer
    Паттерн наилучшего написания кода с отловом ошибок - это TDD. При таком подходе ошибки отлавливаются в процессе написания, а не в рантайм. ;)
    Ответ написан
  • Можете показать, как правильно собирать проект?

    alexiusp
    @alexiusp
    senior frontend developer
    1 - найдите на github какой-нибудь boilerplate, starter или seed app, посмотрите как там всё сделано, разберитесь
    2 - погуглите best practices как по структуре react, так и по sass/scss
    Ответ написан
    1 комментарий
  • Можно ли (используют ли) один и тот же код (к примеру Angular или Vue) как для Веб, так и для Мобильных приложений?

    alexiusp
    @alexiusp
    senior frontend developer
    Если приложение не использует никаких возможностей мобильной платформы, то никаких проблем использовать один и тот же код нет - адаптивная разметка (можно тот же bootstrap и angular совместить) и cordova в помощь. Можно также посмотреть в сторону недавно появившихся WPA - там даже компилировать под платформу и выкладывать в маркет не нужно.

    Если же функционал на мобильной платформе будет немного отличаться от веб версии, то всё равно, используя cordova с плагинами и разделение кода на репозитории git, можно добиться практически полного переиспользования кода, хотя и усилий придётся затратить больше.

    Ionic, построенный на базе cordova и angular, тоже неплохое решение для гибридных приложений.
    Ответ написан
    Комментировать
  • Какую платформу выбрать для крупномасштабного веб-проекта?

    alexiusp
    @alexiusp
    senior frontend developer
    На свете не существует библиотеки компонентов, даже платной, которая бы удовлетворяла всем потребностям всех разработчиков. Всегда приходится допиливать. Если вы хотите создать крупный проект не написав ни строчки кода и не потратив ни рубля - вы не по адресу.

    По моему опыту, чем проще изначальная библиотека, тем легче её модифицировать/допиливать до необходимого функционала. Поэтому я бы предложил связку Angular+Bootstrap. Для хитрых UI компонентов также хорошо подходит React, но к нему нужен ещё зоопарк библиотек для управления состоянием, кэширования AJAX запросов и всего остального.
    Ответ написан
    Комментировать
  • Как перехватывать событие прорисовки динамических данных в bootstrap modal?

    alexiusp
    @alexiusp
    senior frontend developer
    Я немного не понял ситуацию. Если ваши промисы выполняются быстрее, чем происходит отрисовка, то зачем вообще выводить эту промежуточную информацию? Пользователь не успеет её прочитать. Отобразите индикатор загрузки изначально и заполняйте тэг значением в самом конце. Либо добавляйте новый тэг в конец, а предыдущий скрывайте с анимацией - так будет красивее.
    Ответ написан
  • Как подружить Angular и Webpack?

    alexiusp
    @alexiusp
    senior frontend developer
    Для включения файлов (css etc.) в имеющийся проект достаточно их где-то импортировать. Если речь идёт о так называемых ассетах (изображения, шрифты и т.д.) то нужно для этого дополнительный вебпаковский плагин поставить. Не могу на вскидку вспомнить как он называется, но что-то с копированием файлов связано. По-моему в последних версиях ангуляра он идёт в комплекте по умолчанию. В ионике он точно есть. Он просто копирует все файлы из определённой папки (assets) src в такую же папку в dist.
    Ответ написан
    Комментировать
  • Как отобразить в глобальной сети мое приложение на JS (точнее на p5.js)?

    alexiusp
    @alexiusp
    senior frontend developer
    Самый быстрый способ - использовать GitHub Pages
    Ответ написан
    Комментировать
  • Как обрабатывать ошибки от сервера?

    alexiusp
    @alexiusp
    senior frontend developer
    Вас не смущает два вызова this.router.navigate(['/login']); в двух местах?

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

    alexiusp
    @alexiusp
    senior frontend developer
    Сами запросы проще всего реализовать через curl. Как именно вы будете при этом прокидывать параметры со своей формы к серверу - вам решать. Нет ничего сложного в том, чтобы переименовать параметры при обработке на сервере. С другой стороны, если страницу с формой тоже делаете вы или член вашей команды, почему бы не договориться о более удобном именовании полей формы?
    Ответ написан
    Комментировать
  • Как убедиться что ассинхронная инициализация в конструкторе сервиса Angular завершена?

    alexiusp
    @alexiusp
    senior frontend developer
    1. Как правильно заметили в предыдущем ответе - конструктор не должен быть асинхронным. Вынесите инициализацию в отдельный метод.

    2. Почему нельзя подписывать до установления соединения? Кто это сказал? Я не знаю, насчёт используемого вами клиента, но можно же свой Subject (из RxJs) объявить, на него подписаться, а он уже будет прокидывать события из сокета, когда соединение установится. Т.е. на события сокета подписывается только сервис, который его создал, после того, как соединение будет установлено. Все остальные подписываются на события этого сервиса. Сервис пробрасывает все события, которые приходят от сокета, своим подписчикам.
    Ответ написан
  • Как вернуть значение в компонент после store.dispatch() (ngrx angular2)?

    alexiusp
    @alexiusp
    senior frontend developer
    Ну, во-первых, а почему, собственно, хранить всё в store - не вариант? Где-то это хранить всё равно придётся. Я бы хранил в store.

    Но если всё же хочется посложнее, то можно сделать под это событие свой Subject (из rx.js). Те компоненты, которым нужно знать об этом событии подписываются на этот Subject, а сервис, которые получает данные вызывает Subject.next с данными о лайке. Отличие Subject от Observable в том, что у Subject может быть сколько угодно подписчиков и все они узнают о событии. Похоже, именно это вам нужно? Единственное, что меня тут смущает - не будет ли такое решение ещё более ресурсоёмким, чем хранение всех данных в store.
    Ответ написан
    Комментировать
  • Возможно ли Angular 2 использовать со сторонним кодом?

    alexiusp
    @alexiusp
    senior frontend developer
    Javascript код бутстрапа не привязан к зонам (скоупу в первой версии) ангуляра. Это ведёт к рассинхронизации их работы (ангуляр не знает о коллбэках бутстрапа и коллбэк в бутстрапе не имеет доступа к данным контроллера ангуляра) и в некоторых случаях к невозможности совместной работы, особенно, если компоненты бутстрапа (табы, например) генерируются динамически.

    Для того, чтобы ангуляр "знал" о компонентах бутстрапа их заворачивают в "адаптеры". Подобные адаптеры есть и для большинства других популярных библиотек. Автор выше уже привёл пример подобного адаптера для интересующей вас библиотеки.
    Ответ написан
    Комментировать
  • Как организовать авторизацию в связке node.js и vue.js?

    alexiusp
    @alexiusp
    senior frontend developer
    Берите Passport.js и Express.js. Они хорошо работают вместе. Сложностей особых никаких, если, конечно, понимать, как вообще работает авторизация. Про альтернативы, честно скажу, не помню. Когда искал, что-то всплывало, но паспорт лучше и в плане простоты, и в плане широкого набора доступных способов авторизации.
    Со стороны Vue.js никаких сложностей нет. Vue.js не предоставляет никакого инструментария для работы с http запросами. Поэтому все возможные сложности в этом плане будут связаны с той библиотекой, которую вы для этого выберете. Я бы рекомендовал сразу нацеливаться на новый fetch API. Если нужна поддержка старых браузеров есть полифиллы. Fetch прозрачно поддерживает и куки и заголовки авторизации, так что проблем особых быть не должно.
    Для тестирования и отладки авторизации на бэкенде очень полезный инструмент - Postman. Позволяет делать запросы к бэкенду без браузера и клиентской части, легко играться с параметрами запроса, куками и заголовками.
    Ответ написан
    Комментировать