Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (4)

Наибольший вклад в теги

Все теги (21)

Лучшие ответы пользователя

Все ответы (41)
  • Как влиться в тренд нынешней веб-разработки?

    @SuperOleg39ru
    Front-end разработчик
    Добрый день!

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

    flexbox, grid layout
    - это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
    Немного о новинках в css тут.
    Поддержка браузерами тут.

    gulp, webpack и пр.
    - это инструменты, которые созданы для облегчения рутинных задач.
    Для верстки очень удобно использовать gulp - вы описываете задачи, такие как создание локального сервера, мгновенная перезагрузка страницы при изменениях, минификация ваших файлов, и прочее.
    Посмотрите отличный скринкаст от Ильи Кантора!

    препроцессоры
    - представьте, что вам чего-либо не хватает в html и css.
    Например, вы хотите разбивать большие html файлы на множество мелких, или вам нужно вставить в html динамическое содержание - для этого созданы html шаблонизаторы. Вы используете в работе синтаксис конкретного шаблонизатора, затем тот же gulp автоматически собирает эти файлы в обычный html, который понимает браузер.
    Аналогичная ситуация с css, препроцессоры позволяют разбивать файлы на мелкие, и собирать в один, доступны переменные и функции, и многое другое.
    Популярный шаблонизатор Pug
    Один из css-препроцессоров Stylus

    пакетные менеджеры
    - это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm тут

    Ну и конечно статьи и подкасты:
    https://habrahabr.ru/
    jsraccoon.ru

    https://soundcloud.com/web-standards
    https://radiojs.ru/

    Конкретные статьи и ресурсы для новичка:

    frontender.info/a-baseline-for-front-end-developers
    frontender.info/a-guide-to-flexbox
    css-live.ru/articles-css/pravilnye-kontrolnye-toch...
    https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
    https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
    https://habrahabr.ru/company/zfort/blog/321214/
    https://frontendmasters.gitbooks.io/front-end-hand...

    Дерзайте!
    Ответ написан
    6 комментариев
  • Какую архитектуру используют для создания SPA в 2017 году?

    @SuperOleg39ru
    Front-end разработчик
    Знаю, что от MVC давно отказались
    - это совсем не так.

    Архитектуру SPA приложения задает фреймворк, который вы используете, а в случае с маленькими библиотеками (React) архитектура строится на свой вкус и цвет, так же есть некие стандарты, например create-react-app.

    Отдельный важный момент, это управление состоянием вашего приложения, в сложных случаях это управление требует особой архитектуры, как бы паттерн над паттерном. И тут основные варианты - это Flux или MV* паттерны.

    Например, angular дает вам контроллеры, изменение свойств которых автоматически обновляет view, и сервисы-синглтоны, которые удобно использовать как модели. Вы можете придумать свои способы, что бы автоматически обновлять контроллеры в зависимости от изменения данных в сервисе, либо использовать паттерн, например MVVM:
    Если представить html шаблон как view, контроллер как view-model, а сервис как model - вам нужно реализовать подписку view-model на изменения model, а у model - оповещение подписчиков об изменениях. И уже сам angular обновит вам view при изменениях view-model.

    React часто используют в связке с Redux - это библиотека, реализующая Flux паттерн.
    Перерисовка react компонентов в зависимости от их свойств реализована в библиотеке, вам остается создать redux хранилище для всех данных, и передавать в компоненты необходимые им данные из хранилища, а для изменения хранилища - соответствующие действия, которые вы будете вызывать например по вводу данных в инпут.

    Основная мысль - SPA фреймворк дает вам привязку данных к шаблону (aka Вид + Контроллер или Вид + Вид-Модель), и определенные вкусности. Вы же должны решить, как хранить и обновлять важные данные (aka Модель + бизнес-логика), и все зависимые от них элементы.
    Ответ написан
    Комментировать
  • Почему не могу обновить данные при получения события?

    @SuperOleg39ru
    Front-end разработчик
    Добрый день!

    Broadcast вызывается до успешного добавления данных, поэтому его надо перенести в then. Попробуйте так:
    $scope.addDb = function (name) {
            NetFactory.addDb(name).then(
                function (data) {
                    $scope.message = data;
                    $rootScope.$broadcast('db:change');
                }
            );
    };
    Ответ написан
    3 комментария
  • Способен ли Webpack при сборке менять пути API?

    @SuperOleg39ru
    Front-end разработчик
    Вы можете добавлять пути как параметры при билде.

    В конфиге:
    const API = process.env.api;
    
    module.exports = {
        ...,
        plugins: [
            ...,
            new webpack.DefinePlugin({
                API_URL: JSON.stringify(API)
            })
        ]
    }


    И глобальная переменная API_URL будет доступна в коде вашего проекта.

    Условный конфиг для сборки в вашем package.json:
    {
      "scripts": {
        "build": "webpack --env.api=https://api.url/v1"
      }
    }


    Если надо на лету добавить:
    npm run build -- --env.api=https://api.url/v2
    Ответ написан
    Комментировать
  • [code-review] JS галерея, какие замечания?

    @SuperOleg39ru
    Front-end разработчик
    Добрый день!

    1) Для удобства оформите библиотеку как npm пакет.
    И что бы этот пакет можно было использовать разными системами сборки, можно использовать формат определения модуля UMD

    2) При создании экземпляра const gallery = new Gallery({}) - неплохо бы иметь доступ к управлению галереей через JS, например:
    gallery.pause();
    gallery.next();


    Возможно вам захочется добавлять слайды на лету, это тоже отдельный метод.

    3) Так же, можно добавить изменение настроек на лету, gallery.setOptions({})

    В связи с этим можно сделать вывод, что нужен более объекто-ориентированный код, то есть вы создаете класс Gallery, который имеет методы для управления, сохраняет свойства себе в контекст (this), например:

    var defaultOptions = {
      ...
    }
    
    privateMethod() {
      ...
    }
    
    function Gallery(options) {
      this.options = extend(defaultOptions, options);
      this.interval = this.createInterval();
      ...
    }
    
    Gallery.prototype.init = function() {
      ...
    }
    
    Gallery.prototype.next = function() {
      ...
    }
    
    Gallery.prototype.createInterval= function() {
      ...
    }
    
    function extend(a, b) {
      ...
    }


    То есть, всю логику вы разделяете на отдельные функции, которые являются методами класса Gallery, если нужен публичный доступ к этой логике, либо выносите эти методы и свойства наружу, если их нельзя менять пользователям.
    Ответ написан
    3 комментария

Лучшие вопросы пользователя

Все вопросы (11)