Минин, Русаков - ReactJS, Redux и ES2015 с Нуля до Гуру (2016)

Тема в разделе "Сайтостроение и веб-дизайн", создана пользователем Ольга, 4 дек 2016.

  1. Ольга

    Ольга Active Member

    Сообщения:
    1.567
    Репутация:
    148
    ReactJS, Redux и ES2015 с Нуля до Гуру
    [​IMG]
    Автор: Минин, Русаков
    Год: 2016
    Формат: мультимедиакурс


    Почему Javascript
    Сегодня мы уже отчасти понимаем, насколько глубоко и прочно всемирная сеть внедрилась в нашу повседневную жизнь. Практически все отрасли экономики сегодня уже не могут обойтись без проецирования своей деятельности в интернет. Интернет и сфера IT технологий как никогда лидируют по всем показателям, никто больше не отрицает – за этим будущее. Это будущее наступило и развивается с невообразимой скоростью, по пути приобретая все больше различных интерактивных составляющих, а доступ к нему все чаще становится прерогативой мобильных гаджетов, с каждым годом все быстрее отвоевывающих рынок у персональных компьютеров. Поэтому с каждым годом в сфере веб-разработки появляются новые тенденции. Сейчас веб-разработка перешла на новый уровень: все больше и больше сайтов стали использовать язык программирования javascript.

    Чем же вызвана такая популярность javascript на фоне множества других существующих языков программирования? Ведь неспроста javascript за последние пару лет превратился из обычного скриптового языка в гигантского монополиста на рынке, у которого нет конкурентов на данный момент, и в ближайшем будущем их появление не предвидится. Дело в том, что пару лет назад этот язык получил огромный толчок в развитии и теперь с помощью javascript можно:


    Динамически изменять содержимое веб-страниц;


    Управлять поведением браузера;


    Определять, какой браузер использует пользователь;


    Привязывать к различным элементам необходимые обработчики событий;


    Проверять данные форм перед отправкой их на сервер;


    Выполнять код через заданные промежутки времени;


    и многое другое.

    Кроме того, javascript - это очень гибкий, динамический, асинхронный язык. Именно эти качества и позволили этому языку программирования получить такое обширное развитие в кратчайшие сроки. Если сравнивать сайты, созданные на javascript, и обычные статические сайты, например, работающие на PHP, то можно сделать однозначный вывод: сайты, созданные на javascript, работают намного быстрее. Это происходит в связи с тем, что в них намного больше динамики, а это, в свою очередь, позволяет создать действительно красивый и удобный интерфейс сайта.

    Что такое SPA и в чем их преимущества
    Javascript позволяет создавать сайты в формате SPA (single page application). Фактически весь сайт состоит из одной страницы, а все остальное в динамическом режиме самостоятельно делает javascript. Именно он производит маршрутизацию между внутренними страницами, динамическое общение в фоновом режиме с сервером и взаимодействие с пользователем. Другими словами, SPA – это web-приложение, которое размещено на одной web-странице, и это приложение загружает весь необходимый код одновременно с загрузкой самой страницы в целях обеспечения работы всего сайта.
    Следовательно, сайты, построенные по принципу SPA уже сложно назвать «сайтами», для них лучше подойдет определение "больших веб-приложений". Вспомните, например, такие приложения, как, Google Word, Google Excel, Microsoft Outlook и т.д. Удивительно, каким образом столько функционала может уместиться в рамках одной страницы сайта, ведь, по сути, это же просто одностраничные сайты в интернете.
    Но зачем же нужны сайты, построенные по принципу SPA? Давайте более подробно остановимся на выгоде от таких сайтов-приложений. Итак, среди преимуществ SPA можно отметить следующее:


    Во-первых, приложения на SPA отлично работают как на стационарных, так и на мобильных устройствах. Таким образом, обычные компьютеры, планшеты, смартфоны, и даже некоторые простые телефоны могут беспрепятственно работать с сайтами, которые построены по принципу SPA. Следовательно, создав одно приложение, вы получаете гораздо большую аудиторию пользователей, чем при использовании стандартного подхода в программировании.



    Вторым преимуществом сайтов на SPA является их богатый пользовательский интерфейс. Поскольку мы имеем только одну web-страницу, то построить насыщенный интерфейс для пользователя будет гораздо проще. Таким образом гораздо проще хранить информацию о сеансе, а также управлять состояниями представлений и анимацией.


    Третьим плюсом SPA является то, что SPA существенно (в несколько раз) сокращает, так сказать, "хождения по кругу", а именно, загрузка одного и того же контента снова и снова будет занимать значительно меньше времени.

    Таким образом, исходя из вышеуказанных преимуществ, смело можно сделать вывод о неоценимом вкладе SPA в развитие глобальной сети, ведь теперь все приложения, раньше писавшиеся под компьютерные платформы, например, windows, linux, mac и т.д., уже могут не тратиться на разработку и адаптацию нескольких приложений под разные платформы, а просто, при помощи javascript, трансформировать свое приложение в веб-приложение, которое будет работать в браузере. Далее необходимо будет только поддерживать это веб-приложение в одном месте, потому что браузеры не зависят ни от платформы, ни от операционной системы, и везде работают одинаково.

    Исходя из этого, можно сделать вывод о том, что именно за такой системой будущее, так как все больше и больше функционала переносится из оффлайна в онлайн. А все это стало возможным только благодаря динамичности языка javascipt.

    Таким образом, появление javascipt позволило создать быстрый процесс разработки веб-приложений и сделать его невероятно простым и понятным, что дало новый толчок в развитии IT-индустрии. Из-за развития интернета и, в частности, вышеописанных сайтов-приложений, в настоящее время на рынке труда всё большим и большим спросом пользуется профессия front-end разработчика. Front-end разработчик – это специалист, который отвечает за создание визуальной части сайта (его клиентской стороны).

    Данная профессия, в основном, основывается на разработке сайтов на javascript и на написанных на нем фреймворках. То есть, на данный момент, именно клиентская сторона у большинства сайтов состоит не из всего лишь из пары библиотек на jquery, как это было ранее, а представляет собой целый отдельный проект со своей инфраструктурой. И если научиться грамотно организовывать такой клиентский функционал, можно легко преуспеть в данной области и создавать действительно красивые и мощные вещи.

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

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

    Изначально может показаться, что из-за того, что javascript является таким функциональным языком, то будет непросто выучить его тонкости, и процесс написания больших приложений будет занимать длительное время, а чтобы его освоить, понадобится не меньше времени.
    Такое мнение ошибочно, javascript - очень простой язык. Если понять некоторые его особенности, (а они, конечно, в нем присутствуют), дальнейшая работа с ним будет не только проста, но и необычайно выгодна.

    Поскольку, как мы уже говорили, за этим языком программирования будущее (как минимум в ближайшие несколько лет), то обучение этому языку уже сейчас - это беспроигрышный вариант для тех, кто хочет погрузиться в мир динамической разработки. Действительно, не важно, хотите ли вы создавать мобильные приложения под Android или IOS, писать серверные приложения или создавать реально мощные веб-приложения с клиентской частью – все, что вам нужно, - это изучить javascript, так как здесь были приведены лишь некоторые его возможности, а пути развития этого языка программирования будут уже непосредственно зависеть от конкретных технологий.

    Остановимся более подробно на нескольких этих технологиях. Например, в мире веб-разработки сейчас есть два, одних из самых популярных, фреймворка для разработки приложений – это "Angular" от компании Google и "React" от компани Facebook.

    Каковы же преимущества react?

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

    2 /
    Проверенные рекомендации учат создавать компоненты, способные сделать большую базу кода JavaScript простой в обслуживании и легко управляемой.

    3 /
    Третьим преимуществом react является то, что он работает с большинством загрузчиков и наборов инструментов — AMD, CommonJS, или globals; gulp, bower, npm, browserify, webpack, grunt, — удовлетворяя потребности современных javascript-разработчиков.

    4 /
    React намного удобнее кастомизировать лучшими решениями в целях реализации той или иной задачи, что позволяет в большей степени контролировать ваше приложение. Такой unix-подход уже очень хорошо зарекомендовал себя на рынке и пользуется большой популярностью.

    5 /
    Так же плюсом будет то, что принятие react не является рискованным решением «все или ничего». Библиотека хорошо сочетается с большинством существующих баз кода (даже с устаревшими MVC) и интегрируется с существующими платформами пользовательского интерфейса.

    6 /
    Дизайн react идеально сочетается с асинхронными серверными архитектурами для адаптации к будущим технологиям.

    7 /
    Седьмое преимущество - фреймворк react.native, с помощью которого вы сможете создавать нативные приложения для мобильных платформ, таких как android или ios. То есть, выучив подход react, вы сможете также писать на нем, на языке javascript, при этом на выходе получать готовые мобильные приложения. Очень удобно, когда вы пишете сайт на react, и после внесения небольших изменений в код, получаете мобильное приложение под вашу систему.

    8 /
    И последнее, но не по важности, это феноменальная производительность фреймворка - при разработке больших приложений на javascript большое внимание нужно уделять быстродействию, и react нам это обеспечивает, так как он является самым высокопроизводительным фреймворком.

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

    Архитектура для клиентской части?
    Кроме изучения react, front-end разработчику также важно знать актуальные на данный момент архитектурные решения. Поскольку клиентская сторона получила большое развитие и нуждается в масштабируемой и гибкой архитектуре, для данного вопроса можно обозначить несколько решений.

    Разные фреймворки пытаются донести свои принципы разработки приложения. Некоторые из них пытались внести серверную архитектуру MVC на клиентскую сторону, некоторые пытались внести принципы MVVM на front-end, но при этом все приходили к выводу, что для данной области нужно нечто другое.

    Один из разработчиков react, Дэн Абрамов, не так давно разработал отличную архитектуру для фронтенда – "Redux", которая оптимальна, масштабируемаи очень удобна для клиентского программирования. Все аспекты данной архитектуры, или, так называемого, "потока данных", будут полностью рассмотрены в нашем курсе. Поскольку за этим подходом лежит будущее современных front-end приложений, то в курсе так же будет подробно разобрано, как пользоваться Redux и доступно объяснено, как можно применять Redux в реальных приложениях.


    Что вам даст данный курс

    Видеокурс содержит в себе все основные тренды развития современной разработки web-приложений, поэтому практическая часть данного курса будет разрабатываться на новом стандарте javascript, который вышел в 2015 году, добавив этому языку программирования много нового функционала. Мы расскажем, какие новые фичи были добавлены, и как ими пользоваться в реальных приложениях.

    Изучив блок про организацию front-end приложения, вы будете знать, какими инструментами пользуются разработчики клиентской части. Вы выясните, что такое git, npm, node, webpack, package.json, css-препроцессор less и многое другое.

    В части про теорию react вы узнаете основные возможности react и поймете, как им пользоваться.

    redux вы освоите основные принципы и преимущества data-flow и будете знать, как его использовать.

    Кроме теоретической части, курс также включает и практическую часть, эти занятия помогут вам закрепить материал. В практической части вы сможете создать современное SPA на javascript и react на новом стандарте javascript с полного нуля.

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

    Пройдя этот курс, вы сможете глубже понять javascript из блока по продвинутому javascript. Вы узнаете самые актуальные возможности языка в новом стандарте.
    В процессе обучения на основе реально востребованных практических заданий вы:

    Освоите всю необходимую теорию;

    Закрепите теорию на практике;

    Узнаете секреты профессионалов;

    Создадите свое портфолио;

    Расширите свое резюме

    С такими знаниями можно спокойно найти себе высокооплачиваемую работу в разных отраслях бизнеса.

    Описание уроков

    Продвинутый javascript

    • Урок 1. “Инструменты разработчика”. Вы узнаете, какие инструменты используют профессиональные разработчики
    • Урок 2. “Работа с DOM”. Вы узнаете, какие особенности есть при работе с DOM деревом
    • Урок 3. “События”. Вы узнаете тонкости работы с событийной моделью
    • Урок 4. “Типы данных и переменные”. Вы узнаете какие типы данных есть в javascript и их особенности
    • Урок 5. “Замыкания”. Вы узнаете, что такое замыкания и как их использовать
    • Урок 6. “Контекст”. Вы узнаете, что такое bind call и apply и в чем их отличие
    • Урок 7. “Классы”. Вы узнаете как создавать классы в старом стандарте языка
    • Урок 8. “Прототипированное наследование”. Вы узнаете как делать наследование классов
    • Урок 9. “Jquery ajax”. Вы узнаете как делать асинхронные фоновые запросы к серверу
    • Урок 10. “Eslint”. Вы узнаете, что такое eslint и зачем он нужен
    ES2015

    • Урок 1. “Что такое es2015”. Вы узнаете, что такое стандарт javascript es2015
    • Урок 2. “Переменные”. Вы узнаете как создавать переменные и в чем их отличие
    • Урок 3. “Строки и шаблонизация”. Вы узнаете особенности работы со строками
    • Урок 4. “Объекты”. Вы узнаете особенности создания и работы с объектами
    • Урок 5. “Функции”. Вы узнаете как можно создавать функции
    • Урок 6. “Классы”. Вы узнаете как создавать классы
    • Урок 7. “Модули”. Вы узнаете про нативные модули в javascript
    • Урок 8. “Промисы”. Вы узнаете что такое Promises и как с ними работать
    Организация front-end приложения

    • Урок 1. “Структура”. Вы узнаете из чего формируется инфраструктура современного приложения
    • Урок 2. “Создание с нуля”. Вы узнаете, как создавать проект с полного нуля
    • Урок 3. “package.json”. Вы узнаете, что такое package.json, как он облегчает работу и его особенности
    • Урок 4. “Webpack”. Вы узнаете основы работы со сборщиком webpack
    • Урок 5. “Настройка webpack”. Вы узнаете про продвинутую настройку webpack
    • Урок 6. “Настройка eslint”. Вы узнаете как подключить и настроить eslint к проекту
    • Урок 7. “Less”. Вы узнаете как работать с css препроцессором less
    React js теория

    • Урок 1. “Зачем нужны js фреймворки”. Вы узнаете зачем нужны javascript фреймворки
    • Урок 2. “Сравнение с angular”. Вы узнаете про плюсы и минусы фреймворка react по сравнению с angular
    • Урок 3. “Как работает react”. Вы узнаете почему react такой быстрый и эффективный
    • Урок 4. “Создание структуры проекта”. Вы узнаете и получите полностью настроенную структуру проекта
    • Урок 5. “Создание первого компонента”. Вы узнаете как создаются компоненты
    • Урок 6. “JSX синтаксис”. Вы узнаете особенности jsx синтаксиса
    • Урок 7. “Props”. Вы узнаете, что такое props и как передавать различные параметры к компоненту
    • Урок 8. “State”. Вы узнаете, что такое state в компоненте
    • Урок 9. “Связь компонентов”. Вы узнаете как связать несколько компонентов
    • Урок 10. “Жизненный цикл компонента”. Вы узнаете что такое жизненный цикл компонента и зачем он нужен
    • Урок 11. “Коллекции”. Вы узнаете как выводить и работать с коллекциями или массивами в компоненте
    • Урок 12. “Роутеры”. Вы узнаете как работать с роутерами и как осуществлять навигацию между страницами
    Redux теория

    • Урок 1. “Что такое redux”. Вы узнаете, что такое redux
    • Урок 2. “Как работает redux”. Вы узнаете про то как redux работает и почему это будущее современных приложений
    React практика

    • Урок 1. “Изучение архитектуры”. Вы получите полностью рабочую и готовую для разработки структуру проекта и так же узнаете про все ее модули
    • Урок 2. “Настройка redux”. Вы узнаете и увидите по шагам как настроить redux
    • Урок 3. “Настройка devtools”. Вы узнаете как подключить специальные инструменты для удобной разработки
    • Урок 4. “Создание роутеров”. Вы узнаете и увидите как создать расширяемую систему роутинга
    • Урок 5. “Страница 404”. Вы узнаете как создать роутинг для обработки несуществующих страниц
    • Урок 6. “Главная страница”. Вы научитесь создавать главную страницу приложения
    • Урок 7. “Главная страница и redux”. Вы узнаете как соединить главную страницу с redux
    • Урок 8. “Добавление функционала”. Вы научитесь добавлять дополнительные действия к списку элементов и обрабатывать их в redux
    • Урок 9. “Эмуляция асинхронности”. Вы узнаете как хранить данные в браузере у пользователя и как сделать асинхронные запросы
    • Урок 10. “Оптимизация страницы”. Вы научитесь оптимизировать код страницы под redux
    • Урок 11. “Страница списка”. Вы научитесь создавать страницу списка элементов
    • Урок 12. “Страница детального отображения”. Вы научитесь делать страницу для детального отображения каждого элемента списка
    • Урок 13. “Абстрактный компонент модального окна”. Вы узнаете как создать компонент модального окна, которое работает на redux и которое динамически создает свое содержимое, то есть модальное окно будет всего одно на все приложение
    • Урок 14. “Модальное окно редактирования”. Вы узнаете как на основе компонента модального окна создавать окно для редактирования элементов списка
    • Урок 15. “Модальное окно удаления”. Вы узнаете как создать модальное окно для удаления элемента
    • Урок 16. “Создание формы и валидация”. Вы научитесь создавать формы для обработки данных пользователя с валидацией
    • Урок 17. “Продакш сборка”. Вы научитесь делать финальную минифицированную сборку проекта в 1 javascript файл.
    Сайт/Скачать:

    Отзывы:
    Пока нет.
     
Загрузка...

Поделиться этой страницей