2019-12-10 Дополнение:Кто-то говорит, что титульная вечеринка, кто-то говорит, что я не знаю, что сказать, 2020-й испортился или что-то в этом роде. Чтобы еще раз подчеркнуть предысторию, эта статья представляет собой сокращенную версию видео Брэда Траверси на YouTube на китайском языке. Если доступен английский язык, вы можете посмотреть видео на английском языке. Намерение автора состоит в том, чтобы дать всестороннее введение в соответствующие аспекты веб-разработки и задействовать некоторые будущие тенденции, такие как некоторые тенденции в трех основных фреймворках, тенденции веб-сборки, распознавание речи, дефреймворк и т. д. Видео также рассматривает начало веб-разработки.Ученые, дающие некоторые направления раннего обучения и базовые знания, которые необходимо усвоить и т.д.

Надеемся объективно обсудить технологии и сократить ненужное потребление.

возобновить

10.12.2019 Добавлено описание «облачная функция» и соответствующий английский язык для бессерверной архитектуры.

Ниже приводится исходный текст.

start 2019-12-08 14:30:00

утверждение

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

Источник контента:Woohoo.YouTube.com/watch?V=0PT…

Название: Веб-разработка в 2020 году: практическое руководство

текст начинается

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

Что ты хочешь делать?

Отправная точка программирования очень важна, то есть зачем вы программируете?

Работа
Фрилансеры
быть консультантом
Создайте приложение или сервис для заработка
просто как хобби

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

Набор инструментов 1: Основы

Компьютер/ОС Mac, Windows, Linux
Редактор vscode, возвышенное, visual studio, eclipse
браузер хром, фаерфокс
Терминал bash, powershell, git bash, iTerm, Hyper
Дизайн (по желанию) Adobe Collection, Sketch, Figma

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

Редактор, как веб-разработка, первым советует vscode.Конечно, есть и длинные истории, обсуждающие битву между vim и xxx.Я так понимаю, что vim — это режим редактирования, а vscode — это ide. прямой конфликт между ними, и вы можете справиться с обоими.

Браузер, хром — первый выбор, у firefox очень низкая доля рынка, за исключением тех, кому он нравится.

Терминал, этому нечего сказать, типа, с каким ты знаком, не выбирай.

Программное обеспечение для дизайна может быть более важным для фрилансеров, или серия Adobe является королем.

HTML & CSS

Как интерфейсный разработчик, независимо от вашего уровня, HTML и CSS являются фундаментальными и обязательными навыками.

HTML5 (семантика, атрибуты, типы документов и т. д.)
Основы CSS (цвета, шрифты, позиционирование, блочная модель)
Сетка CSS и гибкий макет
Пользовательские свойства CSS
CSS-анимация

Согласитесь, модель в этом плане - Чжан Синьсюй. Если у вас есть вопросы по CSS или HTML, просто поищите в блоге Чжана, и вы найдете ответы на 95% вопросов. Это профессия. На самом деле, CSS идет в ногу со временем, время от времени все равно приходится оглядываться назад, всегда можно узнать что-то, чего вы не знали или с чем не были знакомы в прошлом. Новичку лучше всего тщательно изучить эти две основы.

Адаптивный макет

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

Область просмотра
запросы средств массовой информации
ширина потока
бэр система единиц
мобильный первый

Узнайте об адаптивной верстке из приведенных выше аспектов, а затем сделайте несколько кейсов, чтобы ознакомиться с ней. Это не будет слишком сложно. Обратите внимание, что единица измерения в апплете - rpx (если я правильно помню)

Пользовательские повторно используемые компоненты CSS

Создавайте свои собственные модули и осваивайте собственные повторно используемые компоненты CSS.

Сасс может изучить это.

Переменная
вложенное определение
Определение условия

Здесь вы можете узнать больше о postcss, конечно, все исходя из потребностей проекта. Можно узнать про sass, less, стилус и тому подобное.

CSS-фреймворк

Множество CSS-фреймворков.

bootstrap
tailwind CSS
materialize
bulma

Прошу прощения, я знаю, что бутстрап знаменит, и другие тоже знают семантический пользовательский интерфейс, если поискать css framework, то их будет много. Я также столкнулся со свежим попутным css.Этот фреймворк не предоставляет готовых компонентов.Ощущение, что эти фреймворки делают слишком много, но дает возможность настроить свой собственный фреймворк.Заинтересованные студенты могут узнать о нем больше.

Родной JavaScript

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

Основы (переменные, типы данных, функции, условные операторы и т. д.)
DOM (объектная модель документа)
JSON (лень переводить)
Fetch API (запрос/ответ/Ajax)
Современный JS (ES6)

Независимо от vue, react, typescript, в конце концов все возвращается к JavaScript, поэтому начинающий должен честно заложить прочную основу в JavaScript, лучше понять синтаксис и функции нативного JavaScript, а фреймворки основаны на наборе концепций. свои сильные стороны, и даже в последние годы появились некоторые антифреймворковые движения, предполагающие, что все основано на бизнес-целях. Стандарт ES6, взгляните на учебник г-на Руана, чтобы узнать.

одна пятая разделительная линия

Набор инструментов 2

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

git & github
Инструменты разработчика браузера
расширение редактора
emmet
npm/yarn
axios
webpack/parcel

Контроль версий, это необходимо, недавние разработчики находятся в лучшей эре, в основном держась подальше от ftp, svn, пока вы освоите базовое использование git и github, вы можете жить хорошей жизнью, а затем ознакомиться с git когда у вас есть время bash, освойте основные операции git.

Владение инструментами разработчика браузера, инструментами разработчика Chrome достаточно. Если у вас есть лишние возможности, вы можете следить за изменениями каждого обновления версии Chrome, обновлять свои знания, а также использовать их в качестве темы для разговора с друзьями. .

Расширения редактора, vscode или другие современные редакторы, в основном имеют достаточно функций, но все еще есть некоторые персонализированные потребности, которые удовлетворяются в виде расширений.Попробуйте некоторые расширения, которые ваши предшественники считают хорошими, но не слишком жадничайте, машина Если конфигурация не удачная, то достаточно оставить только нужные расширения.

Emmet — вспомогательный html-инструмент, не знаю, почему автор выделил именно его, чтобы подчеркнуть это.

Как веб-разработка, npm/yarn должен осознавать необходимость разработки полного стека. Пакет npm — это море, галактика или даже черная дыра. Хорошие вещи еще нужно найти. Ярн лично считает, что это не нужно. npm ci в принципе достаточно.

Я снова не понимаю axios. Хочу ли я подчеркнуть важность того, что браузер извлекает данные из фоновой службы, упомянув только об этом? Тем не менее, для новичков axios по-прежнему остается очень популярной библиотекой навыков.

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

База выпуска

Веб-разработка должна овладеть некоторыми базовыми навыками публикации.

Регистрация домена (Namecheap, Google Domains и т.д.)
Управление хостингом (InMotion, Hostgator, Bluehost и др.)
Услуги статического хостинга (Netlify, Github Pages)
SSL-сертификат
FTP/SFTP
SSH
CLI & GIT

Для студентов из Дачанга работа в основном выполняется одноклассниками по эксплуатации и техническому обслуживанию.Однако для малых и средних предприятий многие из них все еще могут управляться самостоятельно.Навыки здесь в основном не слишком сложны. Например, для регистрации доменного имени и Tencent Cloud, и Alibaba Cloud предоставляют соответствующие услуги, и знание управления хостингом велико. Это может прийти только из опыта. В последнее время конкуренция за виртуальные хосты vps за границей все еще очень жесткая.В основном они предоставляют бесплатные годовые бесплатные квоты в пределах от 200 до 300 долларов США.Вы можете попробовать больше.

Автор особо выделил Netlify, которым я пользовался раньше, и github+netlify действительно хороший выбор.Студенты, которые хотят испытать автоматизированное развертывание, могут попробовать его.

SSL-сертификат, рекомендуется, чтобы letsencrypt в переводе на китайский был "давайте его зашифруем", хотя он длинный, его легче запомнить. В настоящее время во многих средах все еще существуют высокие требования к https, и бесплатный letsencrypt — лучший выбор.

FTP/SFTP не думайте много, SSH и основные операции командной строки CLI, часть облачного хостинга будет задействована позже, эти знания можно постепенно понять.

Базовые навыки фронтенд-разработки

Основываясь на вышеизложенных знаниях, фронтенд-разработчик уже обладает следующими возможностями.

Создайте сайт для частного лица или малого бизнеса
хорошая мобильная верстка
Создавайте анимацию и эффекты CSS
Умение работать с CSS-фреймворком
Делайте динамические страницы
Создание небольших клиентских приложений с использованием JavaScript
Умение пользоваться инструментами разработчика браузера
Умение пользоваться системой контроля версий
Публикация и поддержка небольших проектов

Нечего добавить, это относительно просто

Что дальше? Два пути (вперед или назад)

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

Продолжайте идти по пути фронтенд-разработки (React, Vue, Angular)
Серверные языки (PHP, Python, C#, Go и др.)

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

Фреймворк для фронтенд-разработки (выберите один из трех)

Среда разработки интерфейса позволяет быстро создавать мощные одностраничные приложения с унифицированным интерактивным пользовательским интерфейсом.

React по-прежнему остается самым популярным фреймворком со средней сложностью в освоении.
Vue продолжает расти, его легче всего изучить
Angular больше используется в разработке на уровне предприятия, и кривая обучения крутая.

Я немного разбираюсь в React и Vue.Здесь вы можете поискать требования для фронтенд-позиций в крупных, средних и малых компаниях.Вообще говоря, Vue по-прежнему относительно популярен в Китае, и доля React, используемого в крупных компаниях также очень высока.

Svelte

писать меньше кода
нет виртуального DOM
очень быстро

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

государственное управление

Крупномасштабные приложения в основном используют сторонние библиотеки инструментов управления состоянием, но старайтесь использовать их как можно реже.

React - Redux, Context API with Hooks
Vue -Vuex
Angular - NGRX, Services
Apollo Client

По задумке автора уже есть какие-то альтернативы (решения) для инструментов управления состоянием в React и Angular, поэтому старайтесь меньше использовать сторонние инструменты управления состоянием.Бритва Оккама здесь, можно использовать как можно меньше.

разделительная линия в две пятых

Рендеринг на стороне сервера (SS-R)

Рендеринг на стороне сервера с помощью NEXT (React) и NUXT (Vue)

больше-лучше-поиска-поисковая-оптимизация-оптимизация
файловая-файловая-система-маршрутизация-маршрутизация
статическое состояние экспорта-экспорта
C-S-S написан на JS

Создание статического сайта (SSG)

Используйте Gatsby (React) и Gridsome (Vue) для создания статических сайтов.

лучшая поисковая оптимизация
маршрутизация файловой системы
Получить данные из локальных файлов при сборке
Система плагинов
GraphQL получить данные

Я не талантлив.Новый блог построен с Гэтсби.Раньше был hexo.Генерация статических сайтов-это тренд.Для разработчиков,которые хотят создавать личные сайты в интернете,или сайты продвижения малого бизнеса,генерация статических сайтов тоже актуальна хороший выбор. , страница открывается достаточно быстро, да и обслуживание тоже очень удобное. Однако, как будет сказано далее, в сочетании с системой управления контентом можно получить в два раза больше результата, приложив вдвое меньше усилий.

TypeScript

Статические типы (переменные, функции и т. д.)
Инструментальная поддержка
Модули, Декораторы, Классы
Компилировать в чистый JS-код

Жаль, что я, ленивый, все время говорю, что хочу изучать ТС, но до сих пор не изучил его систематически.При общей тенденции, ТС все же стоит потратить некоторое время на изучение.Если вы хотите продолжать развиваться в направление front-end разработки. В конце концов, сын отца Microsoft все еще очень силен.

Подводя итоги SHIKE: дорожная карта внешнего интерфейса

Умение работать с front-end фреймворком
Создайте несколько высокоуровневых интерфейсных приложений/интерфейсов.
Плавный процесс фронтенд-разработки
Умение работать с фоновыми API
Умение управлять состоянием приложений и компонентов
Элемент JIAFEN: Рендеринг на стороне сервера (S-S-R) / Сайт JINGTAI SHENGCHENG (S-S-G)

Вышеупомянутый контент, а также несколько проектов CHUILIAN, по сути, является разработчиком интерфейса ZHONGJI. Теперь мы собираемся JIN перед MUBIAO, разработчиком полного стека.

Серверный язык (выберите один)

Чтобы стать full-stack разработчиком или back-end разработчиком, вам необходимо изучить серверные языки программирования и соответствующие серверные технологии.

Node.js
Python
PHP
C#
Ruby
GoLang
Java
Rust

Я не буду вдаваться в подробности о плюсах и минусах различных языков. Node.js — лучший выбор начального уровня для фронтенд-разработчиков. В качестве хобби я также некоторое время использовал PHP и Python. в основном одинаковы. Конечно, если вы хотите пойти дальше, вы должны иметь более глубокое понимание серверных технологий, таких как процессор, память, управление процессами и так далее. Кроме того, если вы заинтересованы в веб-сборке, Rust — правильный выбор.

Серверная платформа (выберите один вариант)

Node.js - Express, Koa, Adonis, Feathers.js, Nest.js
PHP - Laravel, Symfony, Slim
Python - Django, Flask
C# - ASP.NET MVC
Java - Spring MVC, Grails
Ruby - Ruby On Rails, Sinatra
Go -Reval

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

разделительная линия три пятых

База данных (выберите один)

Большинству приложений нужно место для хранения своих данных, и выбор базы данных разнообразен.

Реляционные базы данных — PostgreSQL, MySQL, MS SQL.
NoSQL - MongoDB, PethinkDB, CouchDB
Облачная база данных — Firebase, Azure Cloud DB, AWS
Облегченные классы и классы кэширования — Redis, SQLite, NeDB

Случайное обучение: SQL, ORM, ODM и т. д.

Выбор баз данных также разнообразен, в основном они делятся на реляционные и прочие. Здесь подчеркивается, что какую бы базу данных вы ни выбрали, сделайте ее резервную копию! Резервный! Резервный! Это нужно учитывать в первую очередь. Болезненный опыт потери данных — это просто закон Мерфи. Не так много людей, которые не встречались.

GraphQL

GraphQL — это стандарт API языка запросов.

единая конечная точка
Простой синтаксис, похожий на JSON
легко выполнить
Apollo

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

Система управления контентом

Система управления контентом — это в основном система, позволяющая не разработчикам легко обновлять содержимое сайта.

Традиционные CMS — Wordpress, Drupal, Keystone, Enduro
Бесинтерфейсная система управления контентом — Contentful, Prismic.io, Sanity, Strapi

Он в основном делится на традиционный, ориентированный на человека, и недавно добавленный, ориентированный на машину или API.Инструмент создания статического сайта в сочетании с системой управления контентом без интерфейса предоставляет бесконечные возможности для отображения интерфейса.

Релиз и DevOps

Понимание того, как создавать среды и управлять ими, а также публиковать их в Интернете.

SSH(Secure Shell)
Среда веб-сервера — nginx, Apache
Поставщики хостинга приложений — Linode, Heroku, AWS, Azure, Now
Виртуализация — Докер, Бродяга
Тестирование — модульные тесты, функциональные тесты, интеграционные тесты и т. д.
Балансировка нагрузки, мониторинг, безопасность и многое другое

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

разделительная линия четыре пятых

Полная разработка стека

Освоив все вышеперечисленное, вы, по сути, станете полноценным разработчиком и сможете создавать мощные веб-приложения, управляемые данными.

Создайте пользовательский интерфейс, используя интерфейсные технологии, с которыми вы знакомы
Знание серверных языков и фреймворков
Среда настроена умело, а процесс разработки плавный
Умение создавать фоновые приложения, API, микросервисы и т.д.
Владею различными операциями с базами данных, SQL, технологиями ORM.
Публикация продуктов в Интернете (SSH, Git, облако и т. д.)

Это full-stack разработчик, не говоря уже о техническом контенте, есть много навыков, которые нужно освоить. Читайте дальше, чтобы узнать, что еще вы можете сделать, став полноценным разработчиком.

Мобильная разработка (выберите один)

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

Flutter — SDK, предоставленный Google для создания нативных приложений. Использовать язык дартс
React Native — используйте фреймворк React для создания нативных приложений.
NativeScript — создавайте нативные приложения с помощью JS, TS, Angular или Vue.
Ionic — используйте JS для создания гибридных мобильных приложений
Xamarin — использование C# для создания нативных приложений

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

PWA: прогрессивное веб-приложение

PWA — это обычное веб-приложение, но оно похоже на нативное приложение с более удобным интерфейсом.

Хорошо работает на разных размерах
Частичная операция даже в автономном режиме (обслуживающий рабочий)
устанавливаемый
Стартовый интерфейс
должен быть https
надежный, быстрый, отличный

Честно говоря, помимо доступа к терминалу, есть еще некоторые области обучения на одной трети акра веб-приложений, такие как PWA здесь, Хотя кажется, что автономная работа — это уловка, вы можете научиться о Сервисе Использование Worker имеет свои специфические сценарии использования. Разберитесь сами.

Поле настольного приложения Электрон

Используя Electron, мы можем создавать кроссплатформенные настольные приложения на основе языка JavaScript.

Использование Node.js и Chromium
Безопасность данных
высокая производительность
легко использовать
Зрелые продукты: vscode, атом, почтальон, дискорд

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

JAMstack

"Javascript, APIs & Markup" – это чистый стек технологий переднего плана, который использует JS, API и некоторые языки разметки для создания приложений. Это современная архитектура веб-разработки.

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

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

Бессерверная архитектура/облачная функция

Архитектура, которая не требует фактического владения собственным сервером

«Фон» или «Функция» как услуга (FaaS)
Уменьшите сложность и накладные расходы
Управляйте меньшим количеством инфраструктуры
AWS Lambda и Netlify

Учащиеся, разработавшие небольшие программы, могут иметь более глубокое представление об облачных функциях. Технические моменты здесь в основном обратные full-stack разработке: веб трансформируется во фронтенд, задачи по управлению сервером берут на себя сторонние сервис-провайдеры, которые больше подходят для небольших и средних проектов.

API-первый дизайн

С ростом популярности Интернета вещей подход к проектированию, ориентированный на API, начал расти.

Традиционным способом мы сначала проектируем пользовательский интерфейс, а затем фон
API сначала разрабатывается, мы сначала проектируем API, а затем строим на его основе различные интерфейсы.

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

Машинное обучение/ИИ

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

Упомяните об обычном анализе данных
Уменьшить угрозы безопасности
API машинного обучения
Содержание производства
Помощь в изучении человеческого поведения
подожди подожди подожди

Я сказал, что нет более глубокого понимания.

Распознавание речи

Распознавание речи — главный тренд после 2020 года.

HTML5 Web Speech API
Google Speech-To-Text
человеко-машинный диалог

Распознавание речи по-прежнему должно иметь определенные сценарии использования для внешнего интерфейса. API крупных отечественных производителей по-прежнему очень хорошо распознают китайский язык. Baidu, Tencent Zhiling и др.

Web Assembly

Программа байт-кода, работающая в браузере

Пишите сборки на C, C++ и Rust
Работает намного быстрее, чем JavaScript
JavaScript не замена, а работа с партнерами

JavaScript — это босс, управляющий тем, что делает Web Assembly. Благодаря этой комбинации это дает нам возможность запускать крупномасштабные инструменты для редактирования видео, игры и т. д. на стороне веб-браузера.

заключительное заявление

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

Вот в принципе и все.Для отечественных веб-разработчиков разработка различных небольших программ также является серьезной темой.Ведь такие гиганты, как WeChat и Alipay – это горы, которых отечественным разработчикам не миновать.

end 2019-12-08 17:18

Сегодня днем второй раз смотрю это видео. Кстати, я переведу его и поделюсь им. Если у вас есть разные мнения, пожалуйста, перейдите к оригинальному автору.