Ответы пользователя по тегу JavaScript
  • Webpack? Но зачем?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Для одностраничников (да еще и без реакта, хотя собственно кому в голову придет делать LP на реакте :) ) - конечно, webpack вообще ни к чему. Вам же достаточно gulp + browserSync для комфортной разработки?

    ---
    Когда ваш "инструментарий" отлично справляется с работой - используйте его.
    Когда у ваших инструментов есть какой-то раздражающий момент - ищите варианты решения проблемы. Может быть что-то заменить?
    Когда просто "хочется" чего-нибудь новенького - посмотрите по сторонам, лишним не будет.
    Ответ написан
    2 комментария
  • ComponentWillMount не изменяет свойство?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    "Вернулся обратно" => componentWillMount (скорее всего, либо вы как-то хитро "возвращаетесь обратно")
    Чтобы посмотреть, происходит mount/unmount и как - просто напишите console.log('mount') и console.log('unmount') соотвественно, а потом "походите" и "повозвращайтесь". Думаю все встанет на свои места.
    Ответ написан
  • Как из одной папки запустить два webpack сервера?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Принцип такой:
    1) узнаете как запустить вебпак с необходимым конфигом
    подсказка:
    webpack --config './path/to/config'
    2) вписываете в package.json в секцию scripts, например:
    "server1": "webpack --config './path/to/config'"

    затем npm run server1

    p.s. в секцию scripts можно вписать любую команду, которую вы можете выполнить в терминале.
    Ответ написан
    Комментировать
  • Как использовать ReactJS если back-end на PHP?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вам стоит получше разобраться в теме одностраничных (single page applictaion, SPA) приложений и такого понятия как REST API. То есть, вы на пхп будете делать только "апишку", которая будет отдавать json-данные, например - список продуктов, а на реакте уже это все показывать. Причем, ваше SPA может и скорее всего будет использовать и flux/redux и react-router и npm, но это все нисколько не помешает бэкэнду на php.
    Ответ написан
    4 комментария
  • Как правильно структурировать архитектуру приложения?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Если вы не хотите сравнивать props с помощью shouldComponentUpdate (пишете, что это не резонно), то я думаю единственный вариант - делать компоненты Filter и List контейнерами (Operations по-желанию, из задачи не понятно, хочется его тоже "не обновлять" или нет)
    Ответ написан
  • Как тестировать такие реактовские события кликов в enzyme?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Игорь, отвечу вам на вопрос - "как в таком случае проверить, что такой-то такой-то экшен отправляется в диспетчер?", который всплыл в комментариях, и на который я изначально был настроен =) Тестировать нужно. Тестируется все по документации

    Разберем пример тестирования асинхронного экшен-крейтора на получение списка продуктов:

    Для начала код AC (action creator)
    export function getProducts() {
      return dispatch => {
        dispatch({ type: PRODUCTS_GET_REQUEST })
    
        return request.get(`${API_ROOT_V1}/api/v1/products/getAll`)
          .then(res => {
            if (!res.ok) {
              dispatch({ type: PRODUCTS_GET_FAILURE })
              dispatch(showNotification({
                status: 'err',
                text: 'something going wrong',
              }))
    
            } else {
              dispatch({
                type: PRODUCTS_GET_SUCCESS,
                data: normalize(res.body.data, schema.arrayOfProducts),
              })
            }
          }, err => {
            dispatch({ type: PRODUCTS_GET_FAILURE })
            dispatch(showNotification({
              status: 'err',
              text: err.message,
            }))
          })
      }
    }


    Получается, для тестирования функции getProducts, которая является AC, мы напишем тест, в котором ожидаем в случае успешного выполнения:
    а) что store достигло событие 'PRODUCTS_GET_REQUEST'
    б) что store достигло событие 'PRODUCTS_GET_SUCCESS' с некой data (у меня она еще нормализуется, но это не суть)

    Для этого, нам потребуется redux-mock-store (взято так же из документации).
    Собственно, сам тест:

    it('creates PRODUCTS_GET_SUCCESS when get products has been done', () => {
    
          const data = [
            {
              '_id': '5763e6eccfdb2e9d4baa58ef',
              'name': 'Product A',
              'description': 'Description of A',
              'img': 'no-photo',
              '__v': 0,
              'providers': [],
            },
            {
              '_id': '5763e6eccfdb2e9d4baa58f0',
              'name': 'Product B',
              'description': 'Description of B',
              'img': 'no-photo',
              '__v': 0,
              'providers': [],
            },
          ]
    
          nock(`${API_ROOT_V1}`)
            .get('/api/v1/products/getAll')
            .reply(200, { data })
    
          const expectedActions = [
            { type: PRODUCTS_GET_REQUEST },
            { type: PRODUCTS_GET_SUCCESS, data: normalize(data, schema.arrayOfProducts) },
          ]
    
          const store = mockStore([])
    
          return store.dispatch(getProducts())
            .then( () => expect(store.getActions()).to.deep.equal(expectedActions) )
        })


    То есть, отвечая на вопрос:
    как в таком случае проверить, что такой-то такой-то экшен отправляется в диспетчер

    1) const store = mockStore([])
    2) store.getActions()
    3) сравниваем полученное в п.2 с тем, что ожидаем.

    Здесь я попутно использовал nock для "мока" запроса к API. И немного подробнее описал ожидаемую "фейковую" дату (хотя это было не обязательно). Главное суть: мы ожидаем, что некоторые "экшены" достигнут стора. Это и протестировали.
    Ответ написан
  • Не могу экспортировать объект: React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Нужно:
    export const (или let, function, class ...) NAME, а у вас просто export NAME. Отсюда и проблема.

    например:
    export const NOTIFICATION_SHOW = 'NOTIFICATION_SHOW'


    и в другом файле:
    import { NOTIFICATION_SHOW } from 'bla/bla/bla'
    Ответ написан
    Комментировать
  • Return выполняется раньше получения данных с помощью request, как побороть?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Разобраться как работает асинхронный код. Поставить return в нужном месте и наслаждаться.
    Пример использования дан сразу на главной странице request'a
    var request = require('request');
    request('http://www.google.com', function (error, response, body) {
      if (!error && response.statusCode == 200) {
        console.log(body) // здесь точно уже есть данные
      }
    })
    Ответ написан
    Комментировать
  • Реализация поиска на ReactJs?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Что передавать - зависит от реализации рендера в вашем компоненте. Но если вы берете "весь текст" и фильтруете, то первое что приходит в голову - передавать "отфильтрованный текст".

    Если без "flux/redux/..." то с помощью событийной модели (например, в момент поиска происходит событие "поиск_изменен", а компонент где был весь этот текст слушает данное событие и рендерит только часть отфильтрованную, так как вы ее передали. Если не передали - рендерит все (как будто поиска не было, или поиск пустой))

    Если с flux/redux/... то действуйте в рамках подхода. Если говорить про redux - то просто отправьте action с фильтрованным "куском".
    Ответ написан
    2 комментария
  • Cтоит ли публиковать статью по работе с простенькой библиотекой jsonrpc?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    А куда материалу на русском кроме хабра? На хабре есть шанс получить критику от неглупых людей. Кроме хабра - больше негде :(

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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Баг в мозиле?

    p.s. там hot reload настроен не для всех файлов, вроде бы только для react-компонентов, и для reducers
    Ответ написан
    3 комментария
  • Какой выбртаь фреймфорк для real-time карт (postgresql)?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Кнокаут вряд ли, ибо старый уже (хотя вижу, что релиз вышел 17 ноября 2015...)
    NodeJS - это бэкэнд вообще.

    Далее, идете в гугл, пишите "{фреймворк} leaflet" и смотрите сколько есть материала, какой из них более подробный и вам больше нравится. Какие уже есть готовые решения и так далее. Например, react leaflet
    Ответ написан
    Комментировать
  • Как подключить модуль с помощью require()?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    В этом курсе, вы найдете ответы на ваши вопросы - learn.javascript.ru/screencast/webpack
    Как вам уже сказал, Дмитрий, чтобы require работал - нужно использовать сборщик, который умеет превращать require в нативную функцию подргузки модуля где-то из недр своего файла.

    В вашем случае, require не может работать, так как такой функции нет в window объекте (как известно, глобальный объект для клиентского js - window)
    Ответ написан
    Комментировать
  • React.js + WebApi.NET. Подскажи как сделать авторизацию?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Что делает WebApi .NET ? Как оно будет авторизовывать?

    В общих словах:
    Если по токену - то проблем нет. Делаете форму, отправляете данные - получаете в ответе токен. Токен храните как-нибудь, например в localStorage. На логаут токен очищаете. На "expired" - либо просто просите снова залогиниться, либо используете refresh-токены (сам с рефрешем не заморачивался).

    Если не по токену, то почему и зачем?
    Ответ написан
    3 комментария
  • Можно ли чтобы модуль joomla заработал на bitrix?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Ошибка говорит сама за себя - приходит неверный JSON. Скорее всего приходит html ответ (например верстка страницы index.php) и поэтому JSON.parse падает.

    Как вы правильно указали, вам нужно разобраться, что необходимо ответить на запрос и сделать это для bitrix (то есть необходимо покопаться в исходном коде скрипта формы). Не факт, что это будет единственная ошибка. Полностью функционал формы, наверняка, перетащить можно, но возможно в bitrix есть готовое свое решение, что будет гораздо быстрее? Либо взять стандартную форму и допилить ее до состояния компонента, который вы переносите.
    Ответ написан
    Комментировать
  • AMD или CommonJS?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    а если вы будете использовать require.ensure (из мира webpack) - это не решит вашу проблему? подробнее здесь - https://www.youtube.com/watch?v=Om6yGdU_YlQ
    Ответ написан
    Комментировать
  • Можно ли в Node.js включить многопоточность?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    По прежнему актуально(?) learn.javascript.ru/screencast/nodejs
    Первая часть как раз про "нативную ноду"
    Ответ написан
    5 комментариев
  • Какой модуль/midelware для загрузки изображений на сервер node.js/express выбрать?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Есть универсальный совет: когда выбираете модули, смотрите github проекта
    - когда было последнее обновление?
    - сколько issues не закрытых (и мельком, какие они)
    - сколько звезд

    Допустим модуль обновляется, пулреквесты автор принимает и публикует, критических issues мельком не видно. Тогда уже можно смотреть api модуля. Если нравится - берем и пробуем использовать. Если работает и делает что нужно - оставляем.
    Ответ написан
    Комментировать
  • Как сделать аутентификацию с использованием API?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Присоединяюсь к ответу выше, и добавлю, что мне нравятся материалы Auth0 (да и сама форма авторизации у них очень неплоха!). Про refresh токен от них - тут (англ)
    Ответ написан
    Комментировать
  • 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 комментария