Ответы пользователя по тегу Фронтенд
  • Архитектура Frontend RESTFul приложения?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Здесь такой вопрос уже не раз задавался. При REST подходе, сервер выдает только ответы на ваши api запросы, например в json. Роутинг и шаблонизация, все это организуется уже на клиенте.

    Пример:
    зарпос серверу: GET /news (выдай новости)

    Клиент:
    отрисуй новости по шаблончику (который на клиенте уже задан, сервер вообще не при делах)
    Ответ написан
    3 комментария
  • Какие основные вещи для сайтов нужно уметь делать на JS и ресурсы для изучения?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    если в будущем доберетесь до react, то есть тестовые задания (самые типовые).
    Ответ написан
    Комментировать
  • Как обычно проводятся тесты на фронтенде?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Основа по тестированию есть у Кантора: learn.javascript.ru/testing
    По реакту есть хороший курс на udemy (EN) https://www.udemy.com/react-tdd (10$)
    По redux текстом в доках - https://redux.js.org/recipes/writing-tests
    На хабре полно информации. Ну и как вам уже написали - в гугле миллион ссылок.
    Ответ написан
    3 комментария
  • Как создать одинаковые страницы по регистрации?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Ваш стэк может попасть под аббревиатуру MERN (Mongo, Express, React, Node), по ней много рецептов в гугле. Если бы вы уже указали что умеете, было бы проще.

    Задача по частям (если вы умеете верстать):
    1) сделать API сервер (на node, на фреймворке для ноды - express или на koa или еще на каком-то), следовательно, прочитать что такое REST API, затем гуглить REST API exrepss mongodb и т.п.
    2) Сделать веб-морду для этого: страница логина, страница изменения информации.
    2.1) берем react + redux + react-router и вперед. По полочкам учим каждый из моментов, если нет знаний. Сначала react (форма + изменение данных в ней, потом асинхронная загрузка картинки с прелоадером - это все отличные задачи, никакого redux). Затем таже самая загрузка картинки, но уже с redux. Это даст базовые понятия. Затем связываете ваш фронтенд (пункт 2) и бэкэнд (пункт 1) в единое целое.
    Ответ написан
    Комментировать
  • Когда действительно необходимо потащить flow в проект?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Для того, чтобы в проекте что-то появилось, обычно возникают такие ситуации:
    1) у меня все работает, но что-то не устраивает
    2) у меня есть время и желание выучить новое

    Если у вас п.2 - то просто берете flow и проверяете стало ли с ним лучше / удобнее. Если да - можно внедрять.
    Если п.1 - анализируете что может вам помочь в работе, и пробуете разные инструменты.
    Ответ написан
    Комментировать
  • Как прокачаться в react/redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Запилить любой проект, в котором будут:
    1) авторизация
    2) роутинг (доступ к некоторым страницам закрыт для не авторизованных)
    3) динамическая подгрузка данных
    Ответ написан
    3 комментария
  • Как в react spa грамотно реализовать разделение прав?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    С помощью роутинга react-router, например. В 4й версии думаю так же, но речь про 3ю.
    Часть роутов, оборачивается в родительский роут, котором идет проверка прав юзера, и далее в зависимости от этого вы рисуете:
    а) разные шаблоны, в которых фигурирует this.props.children
    б) null - если запрещен доступ, или опять же this.props.children - если все ок.

    В "чилдренах" - у вас будут вложенные роуты.

    Проверка прав, надеюсь, в вопрос не входит? Но если входит: то нужно сделать запрос на сервер с этим токеном и получить список разрешенных прав.
    Ответ написан
    Комментировать
  • Как вы организовываете folder structure в medium-to-large size react приложении?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    1f2bd294843d4ddca1bb3dd20cf35a70.jpg
    Какая-то тенденция, возможно.. Хочется как-то все "улучшить", вместо "просто писать, пока не будет проблемы". С чем, конкретно, вы столкнулись, что пришло осознание такое?

    Мне кажется, может где-то в проекте и есть неудобства, но я их не ощущаю. Появилась папка helpers, куда я выношу функции, которые используются в разных других файлах, все остальное осталось так же как и было изначально (в проекте уже 1200+ коммитов, много компонентов/контейнеров).

    p.s. папка locales - там файл перевода, в routes и store - по одному конфиг.файлу.
    Ответ написан
    2 комментария
  • Лучшая библиотека для asynchronous data fetching?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Использую isomorphic-fetch
    Ответ написан
    Комментировать
  • Как эмулировать нажатие на react элементы?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Если вы на чужом сайте пытаетесь выполнить $ что-то там, то нужно чтобы $ был равен функции jQuery, ведь по сути, $ - это просто имя функции.
    Поэтому, для начала, введите в консоли $, должно быть что-то подобное:
    6a61a3674506467ea8ca7eb92a01b4fe.jpg
    А не так:
    dff7fdbc6f6a49f3bc13ebcf6258f990.jpg

    Окей, допустим jquery подключен и доступен через $, значит далее проверяйте, что доступен этот элемент:
    $(".dealbtn-up")
    Если доступен и он всего один(!), то едем далее, и проверяем доступна ли функция click (это уже из области фантастики, так как она 100% должна быть доступна, но мало ли что написано другим программистом, главное в этом ответе, для вас - понять последовательность действий).
    Выглядит примерно так.

    Если же, таких ссылок много, то нужно обращаться к элементу по индексу, например:
    $(".dealbtn-up")[0].click()
    Ответ написан
    2 комментария
  • Как устроен Webpack hot reload?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    https://www.youtube.com/watch?v=o0NJQYWR7BI

    И если хочется чуть больше, то в принципе вся часть 8 из скринкаста
    Ответ написан
  • Что делать с огромным файлом скриптов React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Это уже файл после "разбивания на кусочки" (для гугления - code splitting) ?
    Грузите то, что нужно определенному роуту и будет получше.

    гугление не даст полной картинки сразу, но постепенно соберется.

    Потребуется использовать getComponent из React-router, а далее webpack 2 уже сам сделает почти все...

    Выглядит так:
    function def(promise) {
      return promise.then(cmp => {
        console.info('Dynamic loaded by route: ', cmp.default.displayName) // для тестирования можете логировать имя компонента
        return cmp.default
      })
    }
    
    ...
    <Route path='/signin' getComponent={() => def(import('../containers/SigninContainer'))} />
    ...
    Ответ написан
    3 комментария
  • Какой подход (библиотеки, фреймворки) используете при верстке UI?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Всякие красивые чекбоксы, радиобаттоны и прочие интерфейсы верстаю вручную, и естесственно адаптивно.

    Значит при том вы ведете какую-то свою "библиотеку подобных элементов"?
    Так же и другие люди, "ведут" подобные библиотеки, еще больше других людей их используют и пишут о багах, поэтому получается обычно более "протестированный" элемент.

    Пример, для material design - https://getmdl.io/components/index.html
    Там есть github и можно посмотреть код любого компонента... а можно просто взять сразу готовый и использовать, при этом не писать самому.

    Другой пример: есть популярный bootstrap, есть у него сетка, по этой сетке делается много однотипных сайтов, дизайнеры по ней рисуют сразу изначально, в итоге у рядового "конвейрного" мастера по лендингам (ничего плохого не имею против таких специалистов) очень сильно понижается затраченное время на выполнение задачи по адаптивной верстке.
    ===

    По технологиям: вы верстаете, так наверное, используете gulp? Если нет - то пора, получите live reload (не нужно перезагружать страницу), сможете оптимизировать ваши скрипты/стили/картинки... и все это будет сильно высвобождать ваше время.
    Ответ написан
    3 комментария
  • Совокупность каких фреймворков backend + frontend является самым быстрым в контексте получения данных клиентом?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Предполагаю, что стоит не четкая задача + прокрастинация (в смысле: выбирать на чем делать, приятнее/труднее/совесть_меньше_пристает/и тд чем делать. Так как делать - это головняк, трудности (реальные) и все такое).

    По поводу задачи:
    = На backend работа с базой данных (CRUD) [окей, ±тянет на задачу]
    = На фронтенде node.js с Angular 2 Universal. [а это уже выбор конкретных технологий, задача то какая? Задача скорее всего, выглядит как: сделать SPA (одностраничное приложение)]

    Далее вы хорошо расписываете пункты. Поэтому частично прокомментирую:
    Работать с базой данных (CRUD) через REST запросы, при этом добавление/удаление/изменение данных доступно только залогиненному через ГУГЛ, ВК или Твиттер пользователю в роли администратора — не ясно

    Все очень просто, например, используете токен. Не лучший (зато простой), но все же пример с которого можно начать.

    Придется ли использовать в таком случае backend на каком-нибудь php фреймворке типа Laravel или yii2?

    Для "изоморфного" вам нужно научиться отдавать контент страницы в html. На чем делать - не важно.

    Можно ли обойтись только фреймворками для node.js для таких вещей как CRUD + кэширование REST ответов от БД + кэширование изображений + сжатие страниц по типу gzip?

    Не специалист, но думаю почти на все пункты "да".

    Являются ли фреймворки на node.js более медленными по сравнению с php фреймворком на nginx в контексте запросов к бд и обработки данных?

    Скорее да, но это какие-то узкие места, которые вряд ли сразу у вас всплывут. Опять же, тут не спец.

    Резюмирую: вам нужно начать делать. Берете инструменты для backend и пишите API, потом берете "что-угодно" на frontend для взаимодействия с этим API.

    p.s. Если задача запустить какую-то идею - вообще не переживайте за технологический стэк, просто берите и делайте хоть на том же sails, вообще не факт, что вам нужен изоморфный одностраничник...

    p.p.s. Совокупность каких фреймворков backend + frontend является самым быстрым в контексте получения данных клиентом? - однозначного ответа нет, и вряд ли будет. Даже если придут люди с картинками, на которых нарисованы циферки тестов.
    Ответ написан
  • Используют ли при работе с Angular, Backbone, VUE и другими структуру из нескольких html-страниц?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не практикуют.
    Ответ написан
    Комментировать
  • Где найти человека способного быстро и качественно научить основам JS за деньги?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Есть codementor.io , там можно отсортировать по "русский" и "javascript", например. Потом думаю сможете договориться работать без системы.

    p.s. в целом сложно найти ментора. Обычно два пути: платить больше чем человек получает по ставке в час на "подработках", либо пройтись по знакомым разработчикам, которые смогут порекомендовать кого-нибудь (но тут неизвестно, насколько хорош или плох уровень будет)
    Ответ написан
    5 комментариев
  • Какие основные понятия в архитектурах Flux, Reflux, Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    в redux у вас есть:
    store - состояние всего приложения в одном(!) объекте. Для удобства, вы конечно бьете "store" на кусочки и изменяете/обновляете его не целиком, но в конечном счете объект store все равно один.
    actions - действия. Все изменения в redux приложении делаются действиями. Например: Действие(тип: ДОБАВИТЬ_ОДИН)
    actions creators* - создатели действий. Функции, которые вы можете вызывать, вместо того, чтобы вызвать действие, напрямую. Например:
    function add() {
      return { тип: ДОБАВИТЬ_ОДИН }
    }

    reducer - редьюсер. Функция которая принимает текущий объект store, и возвращает новый (с новыми данными).

    Итого: в redux фундаментальных понятий всего три: действие (action), редьюсер (reducer) и состояние (store)

    В реакте и того меньше: есть одно понятие - компонент. А уж там, если хочется: умный/тупой компонент, stateless компонент и может быть что-то еще.

    p.s. в коде функций присутствует русский язык для наглядности.

    p.p.s. туториалы: react для начинающих, создание приложения с использованием redux
    Ответ написан
    2 комментария