Спасибо, очень ценный подход к обучению: в файлики по-проваливались, все что могли по-отменяли и по-сливали. Много раз замечал что люди активно пользующиеся консолью изначально смотрят на те же действия под другим углом. Под таким углом все обычно кажется проще и замысел автора смотрится понятнее
Ребят, ну очень круто подготовленный доклад. Единственное улучшение, которое вижу, не делать так "я вам раньше сказал так, но на самом деле это неправда", я чуть было не закрыл такую обалденную лекцию из-за такой неточности в начале. Чудом решил смотреть, и досмотрел до момента, где автор поправился. Хорошо бы в таких моментах сразу оговариватья (тут все чуть сложнее, внутри мол git оптимизирует хранение блобов).
Спасибо 🙏 узнал некоторые тонкости работы гит’а Но в работе надо гораздо меньше команд чем было показано, я за 3 года работы с гитом, реверт делал несколько раз (до 10 точно) git add, checkout -b , merge , pull, push, commit , revert этого хватит чтобы работать в команде по гит флоу diff, status, log , stash опционально для желающих )))
Ребята, у вас всё в разброс немного! Есть темы, которые очень плохо освещены в сети! Ключевое слово - ОЧЕНЬ!!! Причём, как в русскоязычной системе, так и англоязычной. Новичок, после прохождения базы по javascript, застревает в вопросе, а что же дальше! Дальше конечно проекты. Но каких правильно реализовывать, как правильно разбивать код и какой подход и где используется. Чуть ниже, я напишу просто список непонятных слов, фраз, которые многих вгоняют в ступор. Большая просьба, опишите всю эту кучу одним словом или фразой. Чтобы я знал, как правильно задавать вопросы на форумах. А то я не знаю, как дать понять всем, что я хочу! Итак: подходы разделение кода, шаблонизация, МVC, state, организация кода, биндинг, реактивное программирование, SPA, MPA, Virtual DOM, Нода, Веб-компоненты, Templates, Custom Elements API. Что и откуда выходит? Есть ли какие-то блок схемы, на которых это можно увидеть и понять, что это такое... книги? Можно ли это всё описать одни словом - Паттерны?
Подходы разделение кода - это способы делить ваш код на файлы. При больших объемах кода крайне неудобно хранить весь код в одном файле. В мире фронтенда вы можете разделять html, css, js код на разные переиспользуемые файлы. Почитайте о препроцессорах (примеры: jade - html, scss - css) и модулях в js (learn.javascript.ru/modules-intro). То как именно делить код на файлы решать вам, правильного подхода нет, есть какие-то общепринятые рекомендации. Зависит от того как удобно команде и лично вам. Например вы можете под каждый class создавать отдельный файл, и создать ещё файл utils.js в котором вы будете держать общие полезные функции. Это и есть разделение кода, это непростая задача, и понимание того как делить код в заданном случае придет с опытом и знаниями. Вот простой пример как вы можете делить код на файлы codesandbox.io/s/charming-chatelet-ukkgo?file=/src/index.js. Шаблонизация - подробно читайте тут www.simple-is-better.org/template/. Например jade - это шаблонизатор. Когда при использовании Vue вы пишите {{ someValue }} это тоже шаблонизация. И даже строковая интерполяция в js - `${someVar}` это тоже шаблонизация Биндинг (bind) - это способ привязки контекста к функции. Тема тесна связана с контекстом, подробнее тут learn.javascript.ru/bind и th-cam.com/video/0vs6WkNyzec/w-d-xo.html State (состояние) - это набор данных вашего приложения \ компонента в текущих момент времени. Например: у вас внутри компонента сохранен массив с какими-то данными, несколько булевых флагов, данные с инпутов которые ввел пользователь. Совокупность этих данных и называется состоянием (state) компонента. Вы так же можете хранить глобальные состояния приложения для удобства доступа к ним (например Vuex, Redux) MVC (Model, View, Controller) - архитектурный паттерн. Паттерн говорит вам КАК организовать ваш код. Если вы как новичок попробуете написать относительно сложное приложение, вы быстро поймете что ваш код плохо организован. У вас будут трудности с тем чтобы синхронизировать представление (то что видит пользователь) и данные. У вас будут сложности с хранением, доступом и обработкой данных. Задача паттерна - упростить разработку, и сделать архитектуру более понятной. Паттерны - это обобщенные инструкции как организовать код. Если конкректно про MVC, то сейчас на фронтенде он непопулярен. Например Vue вдохновлен паттерном MVVM (model-view view-model). Про MVVM addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/, про MVC habr.com/ru/company/ruvds/blog/333856/ Организация кода - совокупность принятых вами архитектурных решений. Какие парадигмы, паттерны, фреймворки использовать. Как организовать структуру папок на проекте. Как писать тесты, как настроить линтеры, сборщик и т.д. Реактивное программирование - парадигма, стиль программирования. Очень обширная тема, в интернете много информации. Чтобы было понятнее - ООП и ФП (Объектно-ориентированное и Функциональное программирование) это тоже парадигмы. SPA & MPA - Когда вы пишите например на vue, то юзеру вы отдаете один html файл, в который потом при помощи js вставляется нужный html - это SPA. Если у вас есть несколько html файлов, и бэкенд отдает нужный в зависимости от навигации, то это MPA. Для простоты думайте так: Если роутер (навигация) управляется на стороне фронтенд части - это SPA, если на бэкенде - MPA. Почитать тут merehead.com/ru/blog/single-page-application-vs-multi-page-application/. Virtual DOM - читать тут habr.com/ru/post/256965/, вот серия видео как написать подобное самому th-cam.com/video/_Mv1WSE8fY0/w-d-xo.html Нода (Node, узел) - не путайте с node.js. Это базовый интерфейс узла DOM дерева в браузере. Когда вы работаете с DOM деревом в браузере, вы работаете с Node, или с сущностями которые унаследованы от node. Читать тут developer.mozilla.org/en-US/docs/Web/API/Node Веб-компоненты, Templates, Custom Elements API - читайте тут learn.javascript.ru/web-components и habr.com/ru/post/346670/
learn.javascript.ru замечательный сайт, также есть старый туториал у него в youtube про node.js. Но там объясняется вся суть работы. По факту, ищите какой-то туториал по созданию любого сайта. Вникаете в суть создания, а не копи-пастите всю инфу. И пробуйте сначала на таких учебных проектах что-то писать, какие-то минифичи добавлять. Такие туториалы нужны именно для того, чтобы разобраться как это работает. А потом со своими знаниями js + пониманием как всё работает, пишите собственные проекты.
Спасибо, очень ценный подход к обучению: в файлики по-проваливались, все что могли по-отменяли и по-сливали. Много раз замечал что люди активно пользующиеся консолью изначально смотрят на те же действия под другим углом. Под таким углом все обычно кажется проще и замысел автора смотрится понятнее
Ребят, ну очень круто подготовленный доклад.
Единственное улучшение, которое вижу, не делать так "я вам раньше сказал так, но на самом деле это неправда", я чуть было не закрыл такую обалденную лекцию из-за такой неточности в начале. Чудом решил смотреть, и досмотрел до момента, где автор поправился. Хорошо бы в таких моментах сразу оговариватья (тут все чуть сложнее, внутри мол git оптимизирует хранение блобов).
Спасибо 🙏 узнал некоторые тонкости работы гит’а
Но в работе надо гораздо меньше команд чем было показано, я за 3 года работы с гитом, реверт делал несколько раз (до 10 точно) git add, checkout -b , merge , pull, push, commit , revert этого хватит чтобы работать в команде по гит флоу
diff, status, log , stash опционально для желающих )))
Отличный доклад
спасибо за видео )
Блин, не знал многого, спасибо!
Спасибо!
Ребята, у вас всё в разброс немного! Есть темы, которые очень плохо освещены в сети! Ключевое слово - ОЧЕНЬ!!! Причём, как в русскоязычной системе, так и англоязычной. Новичок, после прохождения базы по javascript, застревает в вопросе, а что же дальше! Дальше конечно проекты. Но каких правильно реализовывать, как правильно разбивать код и какой подход и где используется. Чуть ниже, я напишу просто список непонятных слов, фраз, которые многих вгоняют в ступор. Большая просьба, опишите всю эту кучу одним словом или фразой. Чтобы я знал, как правильно задавать вопросы на форумах. А то я не знаю, как дать понять всем, что я хочу! Итак: подходы разделение кода, шаблонизация, МVC, state, организация кода, биндинг, реактивное программирование, SPA, MPA, Virtual DOM, Нода, Веб-компоненты, Templates, Custom Elements API. Что и откуда выходит? Есть ли какие-то блок схемы, на которых это можно увидеть и понять, что это такое... книги? Можно ли это всё описать одни словом - Паттерны?
Подходы разделение кода - это способы делить ваш код на файлы. При больших объемах кода крайне неудобно хранить весь код в одном файле. В мире фронтенда вы можете разделять html, css, js код на разные переиспользуемые файлы. Почитайте о препроцессорах (примеры: jade - html, scss - css) и модулях в js (learn.javascript.ru/modules-intro). То как именно делить код на файлы решать вам, правильного подхода нет, есть какие-то общепринятые рекомендации. Зависит от того как удобно команде и лично вам. Например вы можете под каждый class создавать отдельный файл, и создать ещё файл utils.js в котором вы будете держать общие полезные функции. Это и есть разделение кода, это непростая задача, и понимание того как делить код в заданном случае придет с опытом и знаниями. Вот простой пример как вы можете делить код на файлы codesandbox.io/s/charming-chatelet-ukkgo?file=/src/index.js.
Шаблонизация - подробно читайте тут www.simple-is-better.org/template/. Например jade - это шаблонизатор. Когда при использовании Vue вы пишите {{ someValue }} это тоже шаблонизация. И даже строковая интерполяция в js - `${someVar}` это тоже шаблонизация
Биндинг (bind) - это способ привязки контекста к функции. Тема тесна связана с контекстом, подробнее тут learn.javascript.ru/bind и th-cam.com/video/0vs6WkNyzec/w-d-xo.html
State (состояние) - это набор данных вашего приложения \ компонента в текущих момент времени. Например: у вас внутри компонента сохранен массив с какими-то данными, несколько булевых флагов, данные с инпутов которые ввел пользователь. Совокупность этих данных и называется состоянием (state) компонента. Вы так же можете хранить глобальные состояния приложения для удобства доступа к ним (например Vuex, Redux)
MVC (Model, View, Controller) - архитектурный паттерн. Паттерн говорит вам КАК организовать ваш код. Если вы как новичок попробуете написать относительно сложное приложение, вы быстро поймете что ваш код плохо организован. У вас будут трудности с тем чтобы синхронизировать представление (то что видит пользователь) и данные. У вас будут сложности с хранением, доступом и обработкой данных. Задача паттерна - упростить разработку, и сделать архитектуру более понятной. Паттерны - это обобщенные инструкции как организовать код. Если конкректно про MVC, то сейчас на фронтенде он непопулярен. Например Vue вдохновлен паттерном MVVM (model-view view-model). Про MVVM addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/, про MVC habr.com/ru/company/ruvds/blog/333856/
Организация кода - совокупность принятых вами архитектурных решений. Какие парадигмы, паттерны, фреймворки использовать. Как организовать структуру папок на проекте. Как писать тесты, как настроить линтеры, сборщик и т.д.
Реактивное программирование - парадигма, стиль программирования. Очень обширная тема, в интернете много информации. Чтобы было понятнее - ООП и ФП (Объектно-ориентированное и Функциональное программирование) это тоже парадигмы.
SPA & MPA - Когда вы пишите например на vue, то юзеру вы отдаете один html файл, в который потом при помощи js вставляется нужный html - это SPA. Если у вас есть несколько html файлов, и бэкенд отдает нужный в зависимости от навигации, то это MPA. Для простоты думайте так: Если роутер (навигация) управляется на стороне фронтенд части - это SPA, если на бэкенде - MPA. Почитать тут merehead.com/ru/blog/single-page-application-vs-multi-page-application/.
Virtual DOM - читать тут habr.com/ru/post/256965/, вот серия видео как написать подобное самому th-cam.com/video/_Mv1WSE8fY0/w-d-xo.html
Нода (Node, узел) - не путайте с node.js. Это базовый интерфейс узла DOM дерева в браузере. Когда вы работаете с DOM деревом в браузере, вы работаете с Node, или с сущностями которые унаследованы от node. Читать тут developer.mozilla.org/en-US/docs/Web/API/Node
Веб-компоненты, Templates, Custom Elements API - читайте тут learn.javascript.ru/web-components и habr.com/ru/post/346670/
learn.javascript.ru замечательный сайт, также есть старый туториал у него в youtube про node.js. Но там объясняется вся суть работы. По факту, ищите какой-то туториал по созданию любого сайта. Вникаете в суть создания, а не копи-пастите всю инфу. И пробуйте сначала на таких учебных проектах что-то писать, какие-то минифичи добавлять. Такие туториалы нужны именно для того, чтобы разобраться как это работает. А потом со своими знаниями js + пониманием как всё работает, пишите собственные проекты.
Ладно, напишу "первый"
Так и быть "второй"
Непонятно ничего, от слова СОВСЕМ. Не пояснено откуда что берется, что как и почему. Просто констатация действий. Ребят, нельзя так информацию давать
1:01:26 ROFL )
Бесполезный доклад