Контратака нового фронтенда (Часть 1)

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

• Контратака нового фронтенда (середина)
• Контратака нового фронтенда (ниже)

• Изначально я планировала закончить эту серию в двух статьях, но в процессе написания обнаружила, что если их тереть друг о друга, длина будет очень длинной😅, поэтому я решила разделить ее на 3 статьи.Первая часть в основном знакомит с текущими и будущими тенденциями разработки интерфейса и конфигурацией разработки для эффективной командной работы; вторая часть в основном посвящена планированию карьеры и предложениям по выбору фабрики; вторая часть посвящена тому, как построить проект интерфейса из царапать.
• Эта статья в основном написана для студентов, которые только что закончили учебу или только что сменили профессию и вошли в переднюю часть ямы.Обобщая некоторый опыт и опыт обучения, его можно рассматривать как руководство по началу карьеры, основанное на моем собственном опыте.
• Технологические стеки и фреймворки, задействованные в статье, не будут обсуждаться слишком глубоко, а в основном познакомят с планированием карьеры и планированием личного роста. Студенты, которых интересует какой-либо момент в статье, могут связаться со мной.

Пишите вам, кто только вошёл в индустрию

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

На самом деле, я только что сменил работу некоторое время назад, что эквивалентно повторному поиску работы.Мои собственные чувства не такие обиженные, как окружающие или в Интернете.По результатам моего собственного собеседования Baidu и Tencent сдали байт, что можно расценивать как объяснение моего роста за последний год.

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

• успойкойся

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

• признать факты

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

• непрерывное обучение

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

Фронтенд тренды

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

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

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

• В узком смысле интерфейс относится к интерактивным приложениям, основанным на среде выполнения браузера.
  • Ядра большинства современных браузеровwebkitИли его производные, двигатель в основном Google V8
  • JS-фреймворки в основномAngular,React,VueТри точки мира и такие, какTypescriptИзо-строго типизированное дополнение
  • Препроцессор в основномSass,Less,StylusТри точки мира
  • Фронтенд-инжиниринг относительно завершен, можно сосредоточиться на развитии бизнеса,Webpackсамый популярный упаковочный инструмент
• В широком смысле внешний интерфейс относится к терминальной среде, которая может взаимодействовать с пользователями, а также к восходящему и нисходящему расширению терминальной среды.
  • В дополнение к среде браузера смешанная разработкаHybrid app, кроссплатформенная разработка, такая какRN,Flutter,Electronи т.д. тоже полно передовой экологии
  • nodeРождение предоставляет серверные возможности,ssr, что, в свою очередь, включает операции с базой данных с некоторымиejsДождитесь рендеринга механизма шаблонов или рендеринга виртуального узла.
  • nodeОн также может предоставить возможность создавать мощные инструменты,BFFвозможности, даже возможности операционной системы и прокси-сервера
  • Другие области также начали привлекаться, например, машинное обучение.tensorflow.jsили несколькоIOTполе

Увидев это, вы вдруг чувствуете, что вот-вот взорветесь:«Какого черта фронтенд такой простой? Блоггеры, вы не кидаете деньги? Зачем вы притворяетесь такими сложными?»🤮🤮

По сути, это текущее состояние фронтенда. Так что не думайте, что это сработаетVueНапишите страницу, посмотрите два API MDN и довольствуйтесь одним или двумя проектами. Может быть, вы скажете:«Многое из того, что вы сказали, относится к бэкенду, я просто хочу заняться бэкендом».Но на самом деле это стандарт занятости практически для всех больших коллективов.Если вы все еще верите в фронтенд-экосистему 10-летней давности, держу пари, вас скоро уволят.Конечно, если вы готовы быть соленой рыбой со статус-кво и какое-то время работать в маленькой мастерской, то я этого не говорю.

Я думаю, некоторые студенты такие: они знают, что у фронтенда много дел, но и переоценивают возможности фронтенда. Также вокруг меня есть одноклассники, которые думают, что передняя часть классная, все передняя часть, конечно, он тоже классный и смотрит на все вокруг свысока. Здесь я хочу сказать пять слов:Промышленность, специализирующаяся на хирургии.Это правда, что JS может многое, но во многих случаях это не лучшая практика. Возьмем сервер в качестве примера, факт, который вы должны принять, это то же самое вложение энергии.Иногда GO лучше, чем JS с точки зрения производительности и опыта разработки. Схема, включающая слой кросс-конечного рендеринга, такжеJavaScript BridgeДля моста потеря производительности более чемFlutterРодной рисунок дороже.

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

Настройка рабочего процесса

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

Следующие основаны наMacЭкология также применима к студентам Linux в теории. (Кроме homebrew) Извините, студенты Windows, возможно, вам придется искать конкретный метод настройки в соответствии с идеями, изложенными в статье. Потому что я не настроил рабочую среду под Windows (честно говоря, мой ПК используется только для игр, а не для работы 😂)

Во-первых, студенты Mac идут первымиApple StoreПучокXcodeУстановлено, не установлено на MacXcodeИграть невозможно.Затем начинаем текст.

Терминал и Вим

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

• Установитьiterm2, затем настройтеzshвместо стандартногоbash

# 装好 iterm2 后，在终端中执行，要是没有权限就加上 sudo
chsh -s /bin/zsh

# 安装 oh-my-zsh，感兴趣的同学自己搜一下
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

iterm2Есть несколько интересных функций, таких как всасывание потолка, вызов одним щелчком мыши и т. Д. Есть также много интересных сочетаний клавиш, таких какcommand + dСоздайте новое дочернее окно,command + tСоздайте новый ярлык и т. д., но я не буду вводить здесь слишком много. Заинтересованные студенты могут найти его самостоятельно.Конфигурация iterm2 для Mac, я выложу картинку на всеобщее обозрение.Если вы хотите увидеть конфигурацию, я напишу специальную статью в следующий раз.

• Общие команды терминала

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

# 查看目录下的文件，l 指的是详细信息，a 指的是隐藏文件也看，平时也可以直接 ls
ls -la

# 跳转去某个目录，没有输入完路径时，可以按 tab 自动补全路径，~ 指的是用户根目录
cd ~

# mv 移动文件，移动 a 到 mydir 文件夹下
mv a.md ./mydir/

# mv 重命名，a 重命名为 b
mv a.md b.md

# ps 查看进程，aux 和 -ef 功能类似，都是看目前内存中有哪些进程
# | 这个符号是管道运算符，加上 grep myapp 表示过滤只看 myapp 相关的进程
ps aux | grep myapp

# tail 表示查看某个文件结尾，-f 表示实时查看，有新的内容就会滚动展示
# | 加上 grep 表示过滤只看 127.0.0.1 相关的信息
# 这个组合命令常用在查看日志中
tail -f app.log | grep 127.0.0.1

# 其他还有很多命令就不过多介绍了
# 比如 cp，tail -n 1000，ln，cat，还有压缩相关的命令，大家可以去了解

• операции, связанные с vim

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

Mac предустановленvimДа, так что каждый может использовать его напрямую. дляvim0 базовые студенты, рекомендуется поискать в Интернете самое простое использование. Здесь я делаю лишь краткое введение.

vim 有两种模式：命令模式与编辑模式
命令行中 vim xxx 就直接进入这个文件的命令模式，这个时候是不能打字的
进入命令模式后输入 i 将进入编辑模式，这时候可以打字

命令模式常见指令
1. “hjkl” 代表着 左下上右 四个箭头，“10j” 表示向下移动 10 行
2. “^” 能直接去行首，“$” 能直接去行尾
3. 上下翻页是 “control + f” 和 “control + b”
4. 前后单词是 “b” 和 “w”
5. “dd” 能删除一行
6. “u” 是撤销操作，和平时的 “command + z” 是一样的

编辑模式常见指令
1. “: + q” 表示推出命令模式
2. “: + q!” 表示强制退出，比如修改了内容又不想保存的时候
3. “: + wq” 表示保存并退出

Конфигурация внешней среды

• Сначала на Mac необходимо установитьhomebrewЭто инструмент управления пакетами, похожий на Ubuntu.apt,👉Нажмите здесь, чтобы перейти на официальный сайт

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

• а потом первыйnodeконфигурация. Мак можно использоватьhomebrewдля установки узла, но я рекомендую использоватьnvmдля управления версиями узлов.nvmЭто супер-используемый инструмент управления версиями Node, который может легко установить версию Node или работать с несколькими версиями.👉Ткните сюда, чтобы перейти на гитхаб

  В реальной разработке разные проекты могут зависеть от разных сред узлов.Например, для некоторых старых проектов требуется среда 8.x, а для некоторых новых проектов может потребоваться среда 12.x.На данном этапе может пригодиться nvm.

# 安装 nvm，安装完之后刷一下 .zshrc，或者直接重启 iterm2
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

# 重启之后就可以用 nvm 安装 node 了，找到你想安装的 node 版本直接装
nvm install 12.18.4

# 查看已经安装过的 node 版本
nvm list

# 切换 node 版本
nvm use 12.18.4

# 设置默认版本
nvm alias default v12.18.4

# 查看当前 node 版本
node --version

# 顺带把 yarn 也装了
npm install -g yarn

• Установите nrm для переключения источников

# nrm 是用来切换源的，主要用在两个方面
# 一是国内墙的原因，有时候要切换到淘宝源。二是可能有些包是在自己公司私有源上的，可以添加私有源，方便切换

# 安装 nrm
yarn global add nrm

# 查看当前源
nrm current

# 查看所有源
nrm ls

# 添加一个叫 mynpm 的源，地址是 http://mynpm.test.org/
nrm add mynpm http://mynpm.test.org/

# 切换源
nrm use mynpm

• Установите необходимый фреймворк по всему миру

# 需要 react 的装 react，需要 vue 的装 vue
# 以 vue 为例，我个人习惯用 yarn 安装，如果你习惯用 npm 就改成 npm
yarn global add @vue/cli

# 全局安装 typescript 和 ts-node
# ts-node 是 node 端用来执行 ts 文件的
yarn global add typescript
yarn global add ts-node

# 另外推荐一个好用的全局包 gtop
# gtop 可以很方便的看系统资源的状态
yarn global add gtop 

Эффективная конфигурация IDE

Есть много вариантов интерфейсных IDE, более ранниеsublime,позжеwebstorm, а позже стал популярным по всей странеvscode, даже некоторые хардкорные игроки будут использоватьvimкак инструмент развития. Моя личная рекомендация Microsoftvscode, Легкий и лаконичный, нет недостатка в мощных плагинах, а отладка тоже удобна. В основном я рекомендую несколько плагинов, которые повышают эффективность.Что касается языковой поддержки и стилей тем, они варьируются от человека к человеку, просто подбирайте их в соответствии со своими потребностями и предпочтениями.

имя плагина	Функция
Auto close tag	самозакрывающиеся этикетки
Auto rename tag	Изменить имя тега за один раз
Better comments	Добавить выделенные комментарии в код
Bracket pair colorizer 2	выделить скобки
Code runner	Щелкните правой кнопкой мыши, чтобы выполнить код
Color highlight	цвет выделения
Comment translate	Проверить автоматический перевод
Debugger for chrome	Откройте окно Chrome для отладки
Docker	плагины, связанные с докером
ESLint	плагины, связанные с eslint
Gitlens	инструмент управления git
Import cost	Автоматически рассчитывать размер импортируемого пакета
Markdown preview mermaid support	Предварительный просмотр уценки поддерживает UML-диаграммы в стиле русалки.
Npm intellisense	Ввести путь автозавершения пакета npm
Open in browser	Откроется правый браузер
Prettier	плагин форматирования
Settings sync	Синхронизация конфигурации vscode
TSLint	Плагины, связанные с tslint
Visul studio code commitizen support	Поддержка commitize для отправки проверки git
Vscode-fileheader	Аннотировать файлы с личной информацией

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

1. command + shift + p 呼出面板，输入 open setting，选 json 打开
2. 在打开的配置文件里面加一句 "editor.formatOnSave": true, 然后保存
3. command + shift + p 呼出面板，输入 sync 选择 update 配置，然后跟着提示备份数据
4. 需要从云端恢复配置的时候，呼出面变输入 sync 选择 download 即可。
5. 呼出面板，输入 shell，选择在 PATH 中安装 code 命令，在命令行中就可以 code xxx 用 vscode 打开文件或者目录

Опубликуйте кусок моего vscode

Git и совместная работа в команде

Самая большая разница между работой и студенческими днями (или личными проектами) заключается в необходимости командной работы. Это включает в себя то, как эффективно сотрудничать в командах и как стандартизировать командные процессы НИОКР.MacПривести по умолчаниюgit,нетgitСтуденты могут зайти на официальный сайт.

gitЭто обязательный курс для каждого программиста, и незнакомые студенты должны найти время, чтобыgitИзучайте его систематически, метод г-на Ляо Сюэфэна.gitУчебников достаточно. В основном здесь говорятgitЗнакомые учащиеся могут пропустить настройку и обычное использование .

• инициализация ssh и git

# 配置 ssh 关联 git 仓库
# 邮箱换成自己的，另外生成前检查一下 ~/.ssh 目录，如果有这个目录，重新生成会覆盖
# 输入完命令后会让你填一些东西，一路回车就好，不然容易有坑，除非你清楚你在干啥
ssh-keygen -t rsa -C "o953328679@gmail.com"

# 确保开启 ssh 代理
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa

# 复制 ~/.ssh/id_rsa.pub 的内容
# 然后去你的仓库，比如 github 里找到 setting 选项，然后选 ssh key 选项，新建 ssh key，然后粘贴进去
# 然后你就可以潇洒的 git clone 你的仓库了
pbcopy < ~/.ssh/id_rsa.pub

# 顺便设置一下 git 个人信息
git config --global user.name "Evan"
git config --global user.email "o953328679@gmail.com"

• Разработка готового проекта

# cd 到你的工作目录，假设你有个 workplace 的目录
cd ~/workplace

# 克隆仓库
git clone git@your-address.git

# 拉一个新分支
# 然后在上面开发
git checkout -b your-branch

# 开发完毕后，暂存变更
git add .

# 提交并添加备注
git commit -m "init"

# 推送到远程仓库
git push

• Создайте новый удаленный репозиторий и свяжите локальный проект

# 进入工作目录
cd your-workplace

# 初始化并关联仓库
git init
git remote add origin git@your-address.git

# 拉取代码
git pull origin master

# 查看关联的远程分支
git branch -vv

# 暂存变更
git add .

# 提交并添加备注
git commit -m "init"

# 推送到远程仓库并指定分支
git push --set-upstream origin master

• Познакомить с основным рабочим процессом git
  • masterВетка - самая стабильная ветка, вы можете попасть в нее в любое время.releaseонлайн.masterКак правило, прямая модификация не допускается, и допускается слияние только с другими протестированными ветвями.
  • developВетка используется для тестирования некоторых фич веток, это последняя версия, но не стабильная. Например, если разрабатывается новая функция, которая еще не была протестирована, она объединяется сdevelopна ветке. Точно так же, как правило, его нельзя изменить напрямую, только другие ветки разрешено объединять.
  • featureВетки функций используются для разработки новых функций. Когда разрабатывается новая функция, ветка вытягивается, а когда разработка завершена, она объединяется вdevelopтестовое задание.
  • releaseветвь выпуска, когдаdevelopТест ветки пройден и начнется сdevelopтянуть одинreleaseразветвляться.releaseФилиалам разрешено только исправлять ошибки, но они больше не имеют доступа к новым функциям. После подтверждения правильности версию можно объединить вmasterсередина. также объединитьdevelopГарантия филиалаdevelopКод актуален.
  • hotfixФилиал — это филиал, который срочно исправляет онлайн-баги. слить обратно после ремонтаmasterа такжеdevelopветвь.

Что касается спецификации процесса НИОКР команды, то, вообще говоря, этоeslint / tslintпроверить, отправитьpre-commitСотрудничатьhuskyПроверить, отправить после разработкиcode reviewРазрешить коллегам проверять, отправлять после проверкиmerge requestСнова объедините ветку. Весь процесс подробно описан и требует много статей.Вот статья с Али,которая написана более подробно.👉Статья здесь

разное

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

имя	иллюстрировать
Mongodb	docs.MongoDB.com/manual/Графика...
Mysql	Dev.MySQL.com/downloads/no…
Redis	redis.io/download
Docker	www.docker.com/get-started
Markdown	Я использую mweb, он платный, но очень простой в использовании. С помощью скрипта я могу напрямую публиковать блоги
Postman	www.postman.com/downloads/
Alfred	Очень удобный поисковый инструмент, я использую его вместо Spotlight, который идет в комплекте с mac, потому что его можно искать на определенном сайте, например, я могу искать прямо на npm, прямо на github и т.д.

Выложи фото Альфреда

workflow

Наконец, позвольте мне представить мой собственный рабочий процесс. Я написал несколько скриптов для автоматической синхронизации календарных расписаний и несколько ботов, чтобы напоминать мне о работе. Обычно после встречи я синхронизирую свои дела и расписание напрямую. Затем, когда пришло время работать, просто откройте все это напрямую:

• option + 空格Исходящий терминал, непосредственно в рабочий каталог, а затемcode .Открыть текущий каталог
• вернуться к терминалу,command + tДобавьте окно терминала и запуститеdev
• gitНабор разработки операции, а затем упомянуть одинcode reviewНужно дать коллегам, когда это будет сделаноmerge requestзатем объедините код
• Если вам необходимо ознакомиться с информацией в процессе, пожалуйста,command + 空格вызыватьalfredПоиск
• Открывайте, когда вам нужно записатьmwebЗапишите это на потом
• Некоторые требования требуют проверки журнала, вызова терминала на трамплине, затем перехода к машине разработки и проверки журнала тестовой среды через машину разработки.
• Некоторые требования требуют серверной части илиbff, Ты используешьpostmanотладка

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

Следующее уведомление

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

2020.10.15