Ответы пользователя по тегу Фронтенд
  • Какую библиотеку посоветуете для React, для построения графиков с возможностью кастомизации?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Ответ написан
    Комментировать
  • Как работает Server Side Rendering?

    rockon404
    @rockon404
    Frontend Developer
    Разные разработчики решают этот вопрос по-разному. Фреймворки лишь предоставляют API для статического рендера, а все архитектурные решения ложатся на плечи разработчиков.

    Возможно, вам стоит обратить внимание на готовые решения вроде next и nuxt.
    Ответ написан
    Комментировать
  • Как сделать, чтобы модалка появилась через 5 секунд непосредственного нахождения на странице,даже если до этого она была открыта в неактивной вкладке?

    rockon404
    @rockon404
    Frontend Developer
    Вам надо использовать window.onfocus и window.onblur.
    По onfocus заводить таймаут. По onblur чистить.
    let timeout = null;
    
    const handleClearTimeout = () => {
      clearTimeout(timeout);
    };
    
    const handleSetTimeout = () => {
      timeout = setTimeout(() => {
        showModal();
        window.removeEventListener('focus', handleSetTimeout);
        window.removeEventListener('blur', handleClearTimeout);
      }, 5000);
    };
    
    window.addEventListener('focus', handleSetTimeout);
    window.addEventListener('blur', handleClearTimeout);
    
    if (document.hasFocus()) {
      handleSetTimeout();
    }
    Ответ написан
    1 комментарий
  • Вывод HTML (от сервера) или делать это в JS: функциями для отображения?

    rockon404
    @rockon404
    Frontend Developer
    Рендерить данные в зависимости от логина и других условий можно следующими способами:
    1. Использовать шаблонизатор на стороне сервера.
    2. Использовать фронтенд фреймворк на клиенте.
    Ответ написан
    Комментировать
  • Как верно написать архитектуру приложения?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    проблема в том что сейчас есть инфа по всем годам например. ткунули в год, подложили другую сущность, котрая благополучно храниться в памяти и опля. Когда там этого дела не будет, нужно чтобы ссылка запускала фетч.

    Проблема вообще не проблема. Изменить придется 3-4 строчки

    подкладывать промисы в котрых ифить если есть отдать если нет, сходить туда то? тут я получиться скорее всего намешаю заные архитектурные слои в кучу

    Можно использовать redux или mobX.

    как рендерить в асинхронном режиме? в англяре был async pipe . как это сделать в рекате чтобы на неделю не улететь в оверинженирирг не знать.

    Ключи состояния загрузки, условный рендерниг.
    Простой пример:
    class Example extends React.Component {
      state = { isFetching: false, error: null, data: [] };
      
      // ...
      
      render() {
        if (isFetching) return <Preloader />;
        if (error) return <Error error={error} />;
        
        return data.map(/ ... /); 
      }
    }


    Как правильно и корректно делать релейшены сущностей?

    Можно передавать с бэкенда передавать все связанные данные с результатами запроса:
    {
      posts: [],
      linked: {
        comments: {},
        users: {},
        tags: {}, 
      },
    }


    Вообще вам прежде чем приступать к разработке стоит изучить документацию React. Там же можно пройти tutorial. Почитать немного про экосистему, про state management библиотеки вроде redux и mobX.
    Ответ написан
    Комментировать
  • Как сделать авторизацию в React без Redux?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    На примере использования токенов.

    Авторизация:
    1. Отправляем пару логин/пароль, в случае успеха получаем в ответе токен и данные пользователя.
    2. Пишем данные пользователя в состояние главного компонента, из него прокидываем в контекст.
    3. Токен пишем в cookie и в заголовки по-умолчанию библиотеки для http запросов.
    4. Колбеки авторизации и логаута можно так-же прокинуть в форму логина и кнопку логаута через контекст.

    Инициализация приложения:
    1. Проверяем cookie на наличие токена.
    2. Если он есть запрашиваем пользователя и пишем в главный компонент.
    3. Пишем токен в заголовки по-умолчанию библиотеки для http запросов.

    Логаут:
    1. Удаляем токен из cookie и заголовков по-умолчанию библиотеки для http запросов.
    2. Удаляем данные пользователя из состояния главного компонента.
    3. Делаем редирект с защищенной страницы.
    Ответ написан
    1 комментарий
  • Учебные материалы для создания подобии js фреймворков(vue, react)?

    rockon404
    @rockon404
    Frontend Developer
    how to create your own React course

    Надеюсь вы понимаете, что фреймворки в современном фронтенде надо не писать, а использовать и планируете изучить эти материалы только в целях саморазвития.
    Ответ написан
    1 комментарий
  • Как релизовать вывод контента c помощью HTML?

    rockon404
    @rockon404
    Frontend Developer
    Друг в увивере проходить HTML

    "У моей подруги с ее парнем..."

    Есть какие то идеи , как можно реализовать нечто подобное ?

    Если на чистом html и в одном файле то, скорей всего в задании имеются ввиду якорные ссылки
    Ответ написан
    Комментировать
  • Где грань между версткой и front-end?

    rockon404
    @rockon404
    Frontend Developer
    Где грань, когда можно/нужно обойтись нативными средствами что бы меньше зависеть от либы/фреймворка/js и когда необходимо использовать front-end либы?

    Когда от верстания макетов перейдете к реальным задачам, вроде реализации какого-нибудь сервиса(социальная сеть, личный кабинет банка, сервис бронирования, служба доставки с личным кабинетом, видео конференции и тп), тогда и поймете.

    Для верстки лендосов тянуть фронтенд фреймворки нет особого смысла.
    Второй макет можно реализовать на React/Vue как красивое одностраничное приложение с клиентским роутингом. Там и бронирование отеля и магазин. Думайте не о верстке, а о том как такие вещи как бронирование и магазин реализовывать будете. Тогда может и придет понимание зачем во фронтенд разработке используют фреймворки и где та самая грань.

    Но с другой стороны есть повторяющиеся элементы, те же слайдеры от блока к блоку - можно было бы в react-овский HOC засунуть логику слайдера (это что касается второго макета).

    HOC используют не для этого.

    И в принципе с create-react-app или аналогом от vue было бы удобнее работать чем со сборкой на webpack

    Пока верстаете макеты и не работали в реальных проектах может быть и удобней. И да, create-react-app и аналог от Vue под капотом используют webpack.
    Ответ написан
    Комментировать
  • Как развиваться дальше во фронтенде?

    rockon404
    @rockon404
    Frontend Developer
    Веб-студии - трата времени, если, конечно, не собираетесь в последствии открывать свою или оказывать подобные услуги на фрилансе.
    Осваивайте любой современный фронтенд фреймворк и идите работать в компанию с серьезными проектами и сильной командой.
    Ответ написан
    Комментировать
  • Выбор JS стека для ЛК - на чем остановиться?

    rockon404
    @rockon404
    Frontend Developer
    Есть желание сделать простейшую CRM

    Сделайте для начала простейший ToDo List/WeatherApp.

    Какую БД лучше использовать?

    Любую. MongoDB или MySQL вам за глаза.

    Какой зоопарк фреймворков использовать?

    Любой современный фреймворк.
    Ответ написан
    6 комментариев
  • Дайте совет, как правильно развиваться в фронтенде?

    rockon404
    @rockon404
    Frontend Developer
    Ответ написан
    Комментировать
  • Какой алгоритм прикручивания React/Vue к верстке?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Правильно ли я уловил суть?

    Не правильно. Это будет двойная работа. Проще и правильней сразу верстать c использованием фреймворка.
    Ответ написан
    Комментировать
  • Оценка своего уровня. Как улучшить код?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    1. Используйте const вместо let для определения переменных которые не переопределяются в коде. Это помогает снизить когнитивную нагрузку с человека читающего код и негласный стандарт в React разработке.

    2. Такие вещи как globalStyles и конфигурацию store лучше вынести в отдельные файлы. Они могут со временем хорошо разрастись.
    По поводу globalStyles, вы вообще можете вынести их в отдельный css файл.

    3. Вместо:
    {
      isModal
      ? <Route path="/auth" component={AuthPopup} />
      : null
    }

    лучше:
    {isModal && <Route path="/auth" component={AuthPopup} />}


    4. Вместо:
    function mapDispatchToProps(dispatch) {
        return {
            autoLogin: () => dispatch(autoLogin()),
            getBrowser: () => dispatch(getBrowser()),
            getMedia: () => dispatch(getMedia())
        }
    }


    лучше:
    const mapDispatchToProps = {
      autoLogin,
      getBrowser,
      getMedia,
    };


    5. Точки с запятыми в конце то есть, то нет. Определитесь и приведите код к одному виду.

    6.
    & label {}
    & input {}
    & span {}

    Это не очень хороший подход. Во-первых ваши стили не изолированные, что может приводить к неожиданным результатам. Во-вторых у вас очень много дублирования стилей. Определите Input и Label как базовые компоненты и используйте в разных местах, то же с остальным если есть.

    7. Почему папка со страницами называется Containers? Дань бойлерплейтам?

    8. Использование trailing comma является хорошей практикой.

    9.
    import {combineReducers} from 'redux';
    import photoReducer from './photoReducer';
    import authReducer from './authReducer';
    import globalReducer from './globalReducer';
    
    export default combineReducers({
        photoReducer, authReducer, globalReducer
    })


    Все таки приятней работать с хранилищем в котором ключи не имеют в названии слова reducer:
    import {combineReducers} from 'redux';
    import photo from './photoReducer';
    import auth from './authReducer';
    import global from './globalReducer';
    
    export default combineReducers({
      photo, 
      auth,
      global,
    });


    10. Забудьте вообще, что в языке есть возможность использовать вложенный тернарный оператор:
    return e === 'invalid-email' ? 'Неверно указан e-mail'
        : e === 'user-not-found' ? 'Указанный e-mail на найден'
        : e === 'wrong-password' ? 'Неверный пароль'
        : e === 'email-already-in-use' ? 'Указанный e-mail уже используется'
        : e === 'network-request-failed' ? 'Нет подключения к интернету'
        : e === 'operation-not-allowed' ? 'Произошла ошибка, попробуйте снова'
        : e === 'popup-closed-by-user' ? 'Окно авторизации закрыто пользователем'
        : e === 'account-exists-with-different-credential' ? 'Аккаунт уже существует с другими данными, используйте другой способ авторизации'
        : e

    Это одна из самых худших практик в JavaScript разработке. Тут лучше подойдет конструкция switch case

    11. Константы actionTypes лучше вынести в папку constants и разложить по разным файлам, иначе со временем у вас там будет свалка.

    12. Вместо:
    import {SET_ACTIVE, CHANGE_VALUE, SET_DEFAULT, UPLOAD, UPDATE_IMAGE, SET_IMAGE_ERROR, SET_LIKE, SET_COMMENT, ADD_ARTICLE_SUCCESS, FETCH_ARTICLES_START, FETCH_ARTICLES_SUCCESS, FETCH_ARTICLES_ERROR} from '../actions/actionTypes';

    Лучше:
    import {
      SET_ACTIVE,
      CHANGE_VALUE,
      SET_DEFAULT, UPLOAD,  
      UPDATE_IMAGE,
      SET_IMAGE_ERROR,
      SET_LIKE,
      SET_COMMENT,
      ADD_ARTICLE_SUCCESS,
      FETCH_ARTICLES_START,
      FETCH_ARTICLES_SUCCESS,
      FETCH_ARTICLES_ERROR,
    } from '../actions/actionTypes';


    13. Попробуйте внедрить библиотеку reselect. И для получения значения из store вместо записи вида:
    function mapStateToProps(state) {
        return {
            browser: state.globalReducer.browser
        }
    }


    использовать селектор:
    const mapStateToProps = state => ({
      browser: browserSelector(state),
    });
    Ответ написан
    12 комментариев
  • Выбор операционной системы?

    rockon404
    @rockon404
    Frontend Developer
    OSX и никаких компромиссов.
    Ответ написан
    Комментировать
  • Прокомментируете тестовое на react?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    1. Хотелось бы видеть в проекте использование redux. react+redux - это самый распространенный и востребованный стек в React разработке.

    2. Почему все хандлеры и состояния находятся в App, а не в Main? Как вы потом эту кашу собираетесь масштабировать? Переносите все, что связанно только с Main в Main. По-хорошему смотрите пункт 1.

    3. Слишком много функциональных компонентов. Подумайте их где можно заменить на классы с реализованным shouldComponentUpdate или на PureComponent, чтобы убрать лишние вызовы render этих компонентов.

    4. import Logo from 'images/Logo.png';
    называть пути к ресурсам с заглавной буквы неправильно.

    5. Вместо:
    const StyledLogo = styled.img.attrs({
      src: Logo,
      alt: 'Aviasales'
    })`
      width: 60px;
      height: 61px;
    `;

    Удобней в использовании:
    const StyledLogo = styled.img`
      width: 60px;
      height: 61px;
    `;

    и:
    <StyledLogo src={logo} alt="Aviasales" />

    6.
    const Error = ({ text }) => (
      <StyledError dangerouslySetInnerHTML={{__html: text}} />
    );

    зачем тут html?
    Для сохранения переносов строки есть css правило:
    white-space: pre-line;

    7. Вместо:
    let element;
    
    if (error && !isLoading) {
      element = <Error text={error} />;
    }
    if (!error && isLoading) {
      element = <Loader />;
    }
    if (!error && !isLoading) {
      element = (
        <>
        <Heading />
        <Main
        isCurrencyExchanging={isCurrencyExchanging}
        activeCurrency={activeCurrency}
        handleCurrencyChange={this.handleCurrencyChange}
        ticketsFilteredByStops={ticketsFilteredByStops}
        stops={stops}
        handleStopsChange={this.handleStopsChange}
        handleUncheckOther={this.handleUncheckOther}
        />
        </>
      );
    }
    return element;

    Лучше:
    if (isLoading) return <Loader />;
    
    if (error) return <Error text={error} />;
    
    return (
      <>
        <Heading />
        <Main
          isCurrencyExchanging={isCurrencyExchanging}
          activeCurrency={activeCurrency}
          handleCurrencyChange={this.handleCurrencyChange}
          ticketsFilteredByStops={ticketsFilteredByStops}
          stops={stops}
          handleStopsChange={this.handleStopsChange}
          handleUncheckOther={this.handleUncheckOther}
        />
      </>
    );


    8. Вместо:
    filterTickets = (tickets, stops) => {
      return tickets.filter((ticket) => {
        return values(stops).indexOf(ticket.stops) !== -1;
      });
    };

    Лучше:
    filterTickets = (tickets, stops) => tickets.filter(
      ticket => values(stops).includes(ticket.stops),
    );


    9. Не пропускайте отступы между методами и между вложенными свойствами css.

    10. Вместо:
    componentsDidMount() {
      // много кода
    }


    Лучше:
    componentsDidMount() {
      this.fetchSomeData();
    }


    11. Директории и индексные файлы для каждого компонента, имхо, лишнее. Лучше компоненты определять в одноименном файле и только когда возникнет необходимость в его декомпозиции, заменять на директорию и index.

    12. Loader и Error самое место в директории components/core или что-то вроде того. Там же, по-хорошему, должны находиться базовые компоненты: кнопки, инпуты, табы, чекбоксы.

    13. Styled компоненты, имхо, лучше писать в файле с компонентом, где они применяются. Так анализ кода происходит гораздо быстрей и легче поддерживать. Исключение - переиспользуемые компоненты.
    Даже если вам больше нравится выносить, называть файл style неправильно, вы там описываете компоненты, а не просто стили.
    Ответ написан
    3 комментария