Web Development In 2020 composed by Traversy Media 学习笔记-20年2月16日

参考技术栈与学习路线

原视频:

https://www.bilibili.com/video/av82744403

1.1 现有的常用工具:

  • 系统: macOS
  • 文本编辑器/IDE: VSCode, Sublime Text
  • 浏览器: Chrome, Firefox
  • 终端: Bash,Zsh
  • 页面设计(可选): XD, PS,Sketch

1.2 构筑基元:

  • HTML5 (Semantic elements, attributes, doctype, etc)
  • CSS Fundamental (Colors, fonts, positioning, box model)
  • CSS Grid & Flexbox
  • CSS Custom Properties
  • CSS Transitions

1.3 响应式设计:

适应于所有的平台:显示和可用性

  • Viewport
  • Media Queries
  • Fluid Widths
  • rem units over px
  • Mobile First

1.4 自定义可复用 CSS 组件:

设计自定义的 CSS 组件,框架的流行性在下降。

Sass 可以使得传统的 CSS 效率更高,功能更多

  • Variables
  • Nesting
  • Conditionals

1.5 CSS 框架:

虽然没有过去几年那么流行,但是还是很有用、对于原型设计和设计上并不擅长的开发者依旧很有用

  • Bootstrap
  • Tailwind CSS
  • Materialize
  • Bulma

1.6 Vanilla JS:

  • Fundamentals (Variables, data types, functions, conditionals, etc)
  • DOM (Document Object Model)
  • JSON (JavaScript Object Notation)
  • Fetch API (Request/Response/Ajax)
  • Modern JS (ES6)

1.7 其他工具:

  • Git (Version Control) & Github
  • Browser Dev Tools
  • VSCode Extensions
  • Emmet
  • NPM or Yarn (Package Manager)
  • Axios
  • Webpack or Parcel (JS Module Bundlers)

1.8 基础开发:

将软件、网站托管到网络服务器中

  • Domain Registration
  • Managed Hosting
  • Static Hosting
  • SSL Certificate
  • FTP, SFTP
  • SSH
  • CLI & Git

1.x 基础前端开发:

  • 为个人或小型公司建立网站
  • 创建适合移动端查看的界面
  • 创建 CSS 动画和特效
  • 使用 CSS 框架
  • 增加动态页面效果
  • 使用 JS 创建小的客户端ing用
  • 使用浏览器开发工具
  • 使用 Git 进行版本控制
  • 建立和维护小的工程

2.1 选择语言或框架

  • 前端框架(React,Vue,Angular)
  • 服务器端语言(PHP,Python,C#,Go,etc)

2.2 前端框架选择:

框架用于创建具有组织化、交互 UI 的单页面应用。也适合团队使用。

  • React 最受欢迎的,相对中等难度
  • Vue 受到广泛关注的,较为简单难度
  • Angular 在企业中应用更广泛的,难度较高

2.3 Svelte:

JS编译器,辅助编写用户界面

  • 代码量更少
  • 不需要实质上的 DOM
  • 速度很快

2.4 项目管理 State Management:

对于较大的应用使用第三方管理器,但是有逐渐减少的趋势

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

2.5 服务器端渲染 Server SIde Rendering:

在服务器端使用NEXT(React),NUXT(Vue) 进行渲染

  • 更好的 SEO
  • File System Routing
  • Automatic Code Splitting
  • Static Exporting
  • CSS-in-JS

2.6 静态网站生成器

Gatsby(React),Gridsome(Vue)

  • 更好的SEO
  • File System Routing
  • Data fetching from local files, during build time
  • Plugin system
  • GraphQI For Data

2.7 TypeScript:

JS的超集,支支持静态类型指定和 ES2015

  • Static Typing (vars, functions, etc)
  • Tooling Support with IntelliSense
  • Modules, Decorators, Classes
  • Compiles Into Clean JS Code

2.x 前端工程师的技能 Front-End Wizard:

  • 熟悉流行的前端框架
  • 创建负责的前端应用或界面
  • 优化的前端工作流程
  • 和后端 API 与数据进行交互
  • 管理应用和组件的层级关系
  • 加分项:服务器端渲染,静态网站生成

向前端开发者或全栈发展

3.1 服务器端语言

想要成为全栈或后端工程师,需要学习一门服务器端编程语言或技术

  • Node.js
  • Python
  • PHP
  • C#
  • Ruby
  • GoLang
  • Java
  • Rust

3.2 服务器端框架

  • 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 – Revel

3.3 数据库

  • 关系型数据库 – PostgreSQL,MySQL,MS SQL
  • NoSQL – MongoDB,RethinkDB,CouchDB
  • 云数据库 – Firebase,Azure Cloud DB,AWS
  • 轻量级、缓存 – Redis,SQLLite,NeDB

学习:SQL,ORM,ODM 等等

3.4 GraphQL

API 的请求语言

  • Single endpoint to ask for only what you want
  • Simple syntax, similar to JSON
  • Fairly easy to implement
  • Apollo is a client to interact with the GraphQL server

3.5 内容管理

CMS 用于向软件或应用中添加内容。在客户端中可以对内容进行更新

  • 传统的 CMS – WordPress,Drupal,Keystone,Enduro
  • Headless CMS – Contentful,Prismic.io, Sanity, Strapi

3.6 Depolyment & DevOps

懂得如何创建】管理环境和配置到网络上

  • SSH
  • Web Server Environment – Nginx, Apache
  • App Hosting
  • Virtualization – Docker, VAgrant
  • Testing – Unit, Functional, Intergration, etc
  • Load Balancing, Monitoring, Security, etc

3.x 全栈开发者

可以创建强大的,数据库驱动的 Web 应用

  • 使用任意一种前端技术创建用户界面
  • 流畅的使用服务器端应用和框架
  • 设置开发环境和工作流程
  • 创建后端应用,APIs, 微服务
  • 和数据库(SQL,ORMs)打交道
  • 生产配置(SSH,Git,云等)

4.1 移动端开发

  • Flutter – 来自谷歌原生移动应用构筑 SDK,使用 Dart
  • React Native – 使用 React Framework 构筑原生移动应用
  • NativeScript – 使用 JS, TS,Angular 或 VUE 构筑原省移动应用
  • Ionic – 使用JS 构筑混合移动应用
  • Xamarin – 使用 C# 构筑原生移动应用

4.2 Progressive Web Apps 渐进式 Web 应用:

具有原生的体验、外观和功能的普通 Web App (HTML、CSS、JS)

  • 在所有屏幕尺寸中都很美观;
  • 使用 service workers 在离线时展示内容
  • 不需要安装
  • 具有启动界面
  • 必须使用 HTTPS 协议
  • 可靠、快速、有吸引力

4.3 Electron

使用 JS 构建跨平台应用

  • 使用 Node.JS & Chromium
  • 高数据安全性
  • 效率高
  • 容易使用
  • 例子:VSCode,Atom,Postman,Discord

4.4 JAMstack

JS,APIs & Markup

  • 对于框架和库没有限制要求
  • 网站由源文件生成的静态 html 文件构成,如使用 markdown 构筑静态网站的 Gatsby
  • 高效,在开发时就已经编译完成
  • 便宜,易于