Web开发全栈项目班

课程大纲

Web基础技能提升
Prerequisite: 课程准备
1. 编辑器下载
2. HTML，CSS，JS自我学习
3. 注册Linkedin，Github
4. Nodejs安装
5. 设备推荐
课后补充知识：什么是SSR，CSR，SSG
1. 前端常见的3中渲染方式
2. 了解什么是SSR，CSR和SSG
3. 三种渲染方式的使用环境
Introduction & Web Tech
1. 1.为什么课后要大量练习，课程概述，匠人学院简介，学员自我介绍，对学员的期待
2. 2. 师资力量，全栈班教学安排，三个 project 介绍
3. 3. 需要用到的前后端技术介绍，软技能的重要性
4. 4. 什么是 Internet，客户端和服务器的通信过程
5. 5. URL 的结构，网络请求，现代SPA的原理本质
6. 6. Chrome Inspector如何使用，Inspector每个标签具体使用，以及高级开发隐藏属性
7. 7. iOS真实设备或者模拟器如何进行Debug，Android模拟器如何Debug，web开发对真实设备Debug的重要性
8. 8. 传统和现代的前后端开发流程演变，以及最基础Web架构
9. 9. 云和 AWS 带来的改变AWS 的学习建议
10. 10. Developer和DevOps 的区别，以及Agile在开发中的作用，各个团队扮演的角色，CI/CD的用处
HTML & CSS
1. 1. 网页运行的过程, HTML 标签，Chrome Dev Tool
2. 2. HTML 结构，head 的含义，HTML 是给谁看的，block/inline 元素，常用标签介绍，标签的语义性，accessibility
3. 3. HTML 的注释，HTML 的跨浏览器兼容问题
4. 4. CSS 的作用、发展历史，在 HTML 中插入 CSS 的方式，为什么不推荐 inline style
5. 5. CSS 选择器的用法，伪类
6. 6. CSS 盒模型，margin，padding
7. 7. display 和 visibility 的区别
8. 8. 定位
9. 9. BEM 介绍
HTML&CSS（补充）
1. css概念
2. css引入方法
3. css3选择器
4. css样式
5. 盒模型
6. flex
Technical SEO基础知识
1. 1. SEO是什么，SEO是怎么工作的，影响SEO由哪四大要素影响
2. 2. SEO用什么工具查看
3. 3. Technical SEO具体如何进行有优化
4. 4. 网页的结构应该如何进行优化
5. 5. 面对SEO规则，HTML里如何进行优化，如何使用Canonical，301等
6. 6. 怎样进行提升网站Performance，Page Speed如何提升
CSS & SASS2
1. 1. 评讲 card design 作业，svg 的编辑
2. 2. 设定 box-sizing 的效果
3. 3. CSS 长度单位，绝对单位和相对单位
4. 4. word-wrap 和 word-break 处理文本溢出
5. 5. 伪类、伪元素
6. 6. float 的常见用法
7. 7. 选择器的 specificity 概念
8. 8. 响应式设计
9. 9. Bootstrap 介绍，用 Bootstrap 做响应式设计，Semantic UI
10. 10. CSS 的痛点，SCSS 的写法，变量的用法
11. 11. 弹性盒的用法、解决的问题
12. 12. UI 设计原则，个人网站的设计案例，流行的组件库介绍
JavaScript
1. 1. JS 数据类型的特点，和 TypeScript 的区别，JS 的历史， 在 nodejs中运行 JS
2. 2. 变量，严格模式，变量提升，变量命名规则，数据类型，计算精度的问题
3. 3. 操作符，相等和严格相等，类型转换，truthy/falsy 值
4. 4. 数组，数组的方法
5. 5. 条件语句，循环语句，break/continue 语句，小测验：九九乘法表
6. 6. 用函数实现代码复用，作用域，传参，传值引发的问题
7. 7. 对象，对象和数组的比较，对象中的 this 问题
Git Introduction
1. 1. 版本控制系统的概念，分布式版本控制系统，主流的 git 系统
2. 2. 初始化 git 空间，add，commit，log，gitignore 应该放哪些文件，log 的美化
3. 3. mkdir 创建目录
4. 4. 图形化工具 Sourcetree
5. 5. commit 之后的回滚，reset，revert，amend
6. 6. checkout、stash 的区别
7. 7. 日常工作中使用 git 的流程
8. 8. 创建远端 repository，clone，push，pull创建分支，merge，如何解决冲突，rebase，pull request，review change 的规则，工作中的 pull request merge 策略
Web Application Delivery
AWS基础
1. 老师：Michel Su
2. 公司： Atlassian
3. 职位：SRE
4. 内容：
5. 1. AWS的基础知识，已经AWS是什么，为什么使用Cloud云计算服务
6. 2. 云计算的优势是什么，云计算的种类，为什么要用AWS
7. 3. IAM是什么，如何定义IAM，Users，Groups，Roles分别是什么，如何进行实施
8. 4. s3的基本操作，如何创建S3的bucket
9. 5. ec2是什么，如何启用ec2。ec2 ，ecs，lambda区别是什么，如何设计
10. 6. Load Balancer是什么，Application Load Balancer用来做什么的。Network的协议是什么
11. 7. AWS考试以及证书是什么
12. 8. API gateway的实施
13. 9. 使用老师提供的项目build一个Serverless的Web Application
5分钟手动部署Web Application 到 AWS S3 静态网站
1. 1. 如何部署前端App
2. 2. 如何创建Bucket
3. 3. Bucket的policy如何填写
4. 4. Bucket的基本操作
Advanced JS 1
1. - JavaScript Basics
2. - Hoisiting
3. - 短路计算
4. - 面试原题
5. - SOLID
Advanced JavaScript 2
1. - Readable
2. - Maintainable
3. - Reusable
ES6
1. ES6
React哲学Part 1 & Part 2 (props）
1. 1. React 哲学，组件的概念
2. 2. 如何划分组件层级，以 Project 1 主页为例
3. 3. 用 React 创建静态版本，分别用普通 JS 和 JSX 写 HTML，体会React 带来的便利性
4. 4. React 中 JSX 代码的运行原理，为什么一些关键字要进行改写，为什么组件名首字母要大写
5. 5. 如何运行 React 代码，引用 React 库，使用 babel，使用 ReactDOM
6. 6. 如何使用 webpack 和 babel 进行自动编译，如何解决 webpack 的报错
7. 7. 标准的澳洲面试流程
8. 8. webpack 的配置，path，正则表达式，生产环境
9. 9. webpack-dev-server，html-webpack-plugin
10. 10. React 项目文件结构
11. 11. import CSS 和图片的方法，各种 loader 的作用
12. 12. props 概念，传递 props 的方法，props 的命名习惯
13. 13. CSS in JS，BEM 的弊端，CSS module 的用法
React 哲学 Part 4 (state lifting & Lifecycle)
1. - props
2. - class compoent
3. - state
React哲学Part 3
1. - npm
2. - create react app
3. - component
4. - declarative
5. - learn once，write anywhere
6. - jsx
7. - project structure
React 哲学 Part 5
1. - class component
2. - setState
3. - hooks
Agile Team Project Delivery
什么是Agile SDLC, Waterfall, Agile介绍
1. 1. Agile 的由来、开发宣言、原则、主要关注点，什么是价值
2. 2. 传统的项目管理如何进行的：悉尼歌剧院，悉尼轻轨
3. 3. Software Development Life Cycle(SDLC)是什么, 具体的每个阶段是什么
4. 4. SDLC-Waterfall和V Model是什么
5. 5. Project Management Methodologies有什么
6. 6. Lean Startup是什么
7. 7. 为什么使用敏捷开发，什么是敏捷开发，与Waterfall有什么区别
8. 8. Agile的价值观是什么，Agile Manifesto是什么，12个原则是什么
Agile Methodologies
1. 1. 敏捷开发采用的具体方法，什么是Scrum，什么是Kanban
2. 2. 结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting
3. 3. Kanban的几个阶段，具体每个阶段的意义是什么
4. 4. Scrum在敏捷开发中的定义是什么
5. 5. Scrum里面的roles是什么，Artifacts是什么，Scrum里面包含的Events有什么
6. 6. SCRUM的3355原则是什么，Value Propositions是什么
7. 7. Retrospective meeting主要用来作什么的
8. 8. Scrum的Teams Roles: Product Owner, Development Team, Scrum Master，分别是什么
9. 9. Kanban具体的步骤是什么
10. 10. 怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算
11. 11. User Story是什么，具体的User Story该怎么写
12. 12. Sprint Planning是什么，
Agile Case研究：微软Microsoft Case Study
1. 来自微软曾获得MVP的Ray老师，讲述以微软Windows交付使用Agile的流程
2. 1. 微软是如何使用Agile的，如何使用Agile敏捷开发以及采用DevOps文化
3. 2. Windows的发布周期
4. 3. Waas是什么，Windows as a Service，其中Rings是什么
5. 4. 微软的开发团队分布
6. 5. Windows开发具体的周期
7. 6. Up-front Planning开发，Code Test Stabilize 过程
8. 7. Windows的开发流程如何转型的，如何提升效率和成功率的
9. 8. Agile在项目开发中的好处是什么
Redux全流程框架, Redux基础知识
1. Redux基础知识，什么是Redux
2. Redux基本的结构是什么，数据流如何交互
3. 如何建立一个简单的Redux项目
Java Basic 1
1. 1. backend development roadmap
2. 2. java basics
Java Basic Jvm and Mechanism
1. 1. Java 学习资料，怎样应对新知识
2. 2. Java 核心概念，封装继承多态，List/Set/Map，泛型，Lambda，强类型语言的优点
3. 3. Java 运行原理，相关文件的后缀名，
4. 4. 怎样创建 Java 项目，Maven 和Gradle 比较，项目文件结构
5. 5. debug 的方法
6. 6. Java 中的变量，primitive 类型和包装类
7. 7. 条件语句，循环语句
8. 8. 类型转换
9. 9. user input
10. 10. 面向对象，创建 package，自定义构造函数，构造函数的多态、复用，getter/setter，public/private
11. 11. ArrayList 的用法
Spring Boot Introduction
1. 1. 复习构造器
2. 2. 类的继承，实例化，this 的指向，子类的多态，consumer，super 访问父类，
3. 3. Set 和 List 比较
4. 4. 泛型
5. 5. 接口类、抽象类的概念和区别
6. 6. collection，Java 中的函数式编程
7. 7. Spring Boot 脚手架搭建，项目文件结构，敏感信息存放的位置，12 factor
8. 8. Postman 介绍
Spring Boot Intro and Restful API
1. 1. docker 常用命令
2. 2. RESTful API 介绍，重要概念：resource，method，endpoint，payload
3. 3. 常用的http methods：get、post、put、patch、delete、option 的使用场景，用 payload 装载内容
4. 4. 请求的组成部分：header，body，URL
5. 5. 为什么 RESTful API 需要 stateless
6. 6. mapstruct 的使用方法和原理
7. 7. 演示在 Spring Boot Controller 和 Service 层中实现 get/post/put/delete 等方法
8. 8. 解析 PathVariable 和  RequestParam
9. 9. 用 postman 进行测试，在 postman 中创建 collection
Agile Scrum
1. 1. Agile 的由来、开发宣言、原则、主要关注点，什么是价值
2. 2. Scrum 框架的各个流程概述，“3355”方法论
3. 3. 结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting
4. 4. 班级进行模拟 retrospective meeting，回顾课程至今的成果与不足
5. 5. 怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算
6. 6. 怎样改进流程、提高效率，为什么企业需要 T 型人才
7. 7. 介绍精益方法和 Kanban，实际使用中 Kanban 和 Scrum 的结合
8. 8. Project 3 分组
9. 9. 介绍 Sportify
SQL and Spring Data JPA
1. SQL:
2. 1. 创建表，主键、外键的关联，表与表之间的关系，删除表，更改表的定义
3. 2. select 语句，选择所有，选择指定 column
4. 3. where 语句，and/or，比较，in/not in，is null/not null
5. 4. 模糊筛选
6. 5. 排序，去掉重复项，起别名
7. 6. 拼接
8. 7. 统计语句：count，sum，max，min，avg
9. 8. group by 语句，having 语句
10. 9. join 语句，left join，inner join，outer join
11. 10. 布尔运算：union, intersect, except
12. 11. 子查询
14. Spring Data JPA:
15. 1. 什么是 ORM，什么是 JPA，什么是 Spring Data JPA
16. 2. Spring Data JPA 使用方法、参数配置
17. 3. 在 DAO 层进行基本查询，分页的两种思路比较，自定义简单查询，怎样查看官方文档
18. 4. 在 DAO层进行复杂查询，JPQL，HQL 和 nativeQuery
19. 5. 在 Entity 层创建表，定义中间表，建立好表之间的一对一、一对多、多对多关系
20. 6. flyway 的用处，如何搭建
21. 7. 配置 Dockerfile： multistage，解压 jar，run shell script，动态注入环境变量
22. 8. 演示 build docker image，注入环境变量
Spring Data JPA
1. Spring Data JPA:
2. 1. 什么是 ORM，什么是 JPA，什么是 Spring Data JPA
3. 2. Spring Data JPA 使用方法、参数配置
4. 3. 在 DAO 层进行基本查询，分页的两种思路比较，自定义简单查询，怎样查看官方文档
5. 4. 在 DAO层进行复杂查询，JPQL，HQL 和 nativeQuery
6. 5. 在 Entity 层创建表，定义中间表，建立好表之间的一对一、一对多、多对多关系
7. 6. flyway 的用处，如何搭建
8. 7. 配置 Dockerfile： multistage，解压 jar，run shell script，动态注入环境变量
9. 8. 演示 build docker image，注入环境变量
Spring data jpa 2
1. 1. Spring Data Jpa connect to multiple datasouce
2. 2. tips on enum and transient fields
3. 3. SQL injection
4. 4. discuss db schema for project 3
Build LMS: 第一步：将设计好的 UI 划分为组件层级
1. 1. 回顾 JS 中的异步概念
2. 2. 回顾 p2，展示文件结构，index 中转的目的
3. 3. React 中加载数据的时机
4. 4. 动态、异步加载数据的方式
5. 5. React 异步陷阱，loading page 怎么写
6. 6. AJAX 简介，XMLHttpRequest 简介、用法、4 个状态，以 p2 为例演示
7. 7. fetch 的用法、优化的写法、存在的问题
8. 8. axios 简介
Build LMS: 第二步：用 React 创建一个静态版本
1. 1. 组内怎么交流，Standup Meeting 的频率，Retro Meeting 怎么开，Bus Factor，多开会少写代码
2. 2. 如何开始一个 create-react-app 项目，项目基本建设：组件库，文件结构
3. 3. 组内如何分配任务，怎么写 AC
4. 4. 怎样创建静态页面，怎样划分组件层级：以写导航栏为例
5. 5. 如何拆出可复用组件
6. 6. style components 用法，就近维护原则，“just enough”原则，责任划分原则
Spring IOC and AOP
1. 1. spring ioc
2. 2. spring aop
3. 3. rate limit implementation by AOP
Spring security and Project3 Backend Architecture
1. 1. spring security 框架介绍
2. 2. authentication 和 authorization 的概念
3. 3. authentication 和 authorization 基于硬编码的实现，JWT 的验证过程，role 和 authority，通过 debug 理解程序的流程
4. 4. 详细讲解用 Mockito 来实现Mock掉Repository层的 class
5. 5. 详细讲解用 Mockito 来进行 Service 层的单元测试
6. 6. 详细讲解用WebMVCTest来进行 Controller 层的单元测试
7. 7. 概述集中处理 exception 的方法
10. Backend architecture
11. 1. 什么是 serverless，EC2，fargate
12. 2. 部署后端到 ECS，cluster、task definitions、ECR、tasks、ALB、RDS 概念
13. 3. 在 EC2 Dashboard 中管理 ECS、LB、auto scaling，region 和 availability zone 的区别
14. 4. 用 Codepipeline 实现 CI/CD，API Gateway 概念
15. 5. 怎样在AWS上搭建后端的基本架构
16. 6. Factor 解读
Build LMS: 第三步：确定 UI state 的最小（且完整）表示
1. 1. styled-components 的多态
2. 2. 为什么要避免 true / false props
3. 3. 怎样把组件拆分成任务，以 login 弹窗为例
4. 4. 设计 state 的步骤，state 放在哪里
5. 5. 弹窗的设计，弹窗的复用
6. 6. 实现点击弹窗外区域关闭弹窗，按下 Esc 键关闭弹窗
7. 7. 实现 log in 和 sign up 的切换
8. 8. 实现下拉菜单
Build LMS: 第四步：确定 state 放置的位置
1. 1. sign up modal 的拆分，最小价值产品
2. 2. 怎么写 form，FormItem，输入框，label
3. 3. 获取 event 中的数据，保存 form 数据到 state
4. 4. 输入框的 validation，error 状态放置的位置
5. 5. 实现用户点击之后才进行 validation
6. 6. 实现 'Confirm password is different to your password'
7. 7. 连接 API，处理服务器错误代码
8. 8. axios instance，配置 .env
Build LMS: 第五步：添加反向数据流
1. 1. 什么是高阶组件，与高阶函数类比，为什么要用高阶组件
2. 2. 怎么写高阶组件：以 withForm 为例
3. 3. 利用 withForm 创建 ForgetPasswordModal
4. 4. 写 Authentication 的痛点，怎样利用 HOC 简化
5. 5. 实现 log in，用 localStorage 保存登录信息，用 axios 拦截器提取和附加 token
6. 6. 使用 React Context 简化 props 传递
React Review
1. 使用 context 的痛点 2. 将 context 的 provider 提取成独立组件，将 consumer 提取成 HOC 3. 根据 SOLID 原则将 UserDropdown 从 Authentication 拆分出来 4. Redux 出现的背景，为什么不应该依赖 Redux 5. Redux 的工作原理，与直接 setState 的区别 6. 如何使用 Redux，将 authentication 的 state 剥离到 Redux 7. 使用工具来追踪 redux
React CI&CD
1. 1. 部署前端项目到 Public Online Env
2. 2. 使用 AWS S3 作为项目静态文件服务器，打包项目文件并部署
3. 3. 使用 ESLint 规范项目开发风格，并尽可能在早期发现项目潜在 BUG
4. 4. 使用 Jest 搭建单元测试，使用 Enzyme (or React Testing Lib) 断言 React Component 渲染以及逻辑
5. 5. 在项目中如何做到 Agile 可持续开发及可持续部署，使用自动化部署工具部署前端项目
React （authentication、Context、Router Dom）
1. - Authentication
2. - Context
3. - React Router Dom
Presentation Web Architecture
1. Project 3 Battle
3. 不同的小组进行Project 3打分
4. 然后1-2位Mentor针对每个小组进行考评打分
5. 优胜队伍有奖励以及奖状
7. 课程评分标准
8. https://www.notion.so/jracademy/Project3-1039a98e7ab24b5bb2fcd47d39d2429b
Career Coaching阶段
Linkedin & CV
1. 1. 校招和社招的要求，entry level vs junior level vs mid level
2. 2. 职场规划，沟通能力的重要性，team match 的重要性
3. 3. 澳洲公司情况，产品方向 vs 咨询方向
4. 4. 找工作网站的区别、建议
5. 5. 工作类型，permanent vs contractor，薪资期待，福利待遇
6. 6. 获取工作的方式：meetup、猎头、内推，如何区分和利用猎头，内推的作用
7. 7. 如何经营 linkedin：提高 SEO 和可读性、扩大人脉、利用 open network、写好 profile
8. 8. 招聘流程，怎样投简历，怎样说未来计划，怎样说 notice period
9. 9. 怎样写简历，LMS 简历制作功能，怎样罗列自己的技能，怎样把项目经历写进简历
10. 10. 求职信的作用，怎样写求职信
如何准备澳洲大厂开发类岗位面试(Amazon老师)
1. 老师：Xuecong，就职于悉尼AWS，SDE
2. 内容：
3. 1. 澳洲大厂开发类岗位面试常见流程
4. 2. 如何‘管理'整个面试流程
5. 3. 如何准备面试申请
6. 4. 准备面试，哪些专业能力需要提高
7. 5. 如何准备大厂面试，体现价值观和企业文化
8. 6. 面试当天注意事项
9. 7. 如何接受，拒绝，协商Offer
Linkedin & CV
1. 1. 校招和社招的要求，entry level vs junior level vs mid level
2. 2. 职场规划，沟通能力的重要性，team match 的重要性
3. 3. 澳洲公司情况，产品方向 vs 咨询方向
4. 4. 找工作网站的区别、建议
5. 5. 工作类型，permanent vs contractor，薪资期待，福利待遇
6. 6. 获取工作的方式：meetup、猎头、内推，如何区分和利用猎头，内推的作用
7. 7. 如何经营 linkedin：提高 SEO 和可读性、扩大人脉、利用 open network、写好 profile
8. 8. 招聘流程，怎样投简历，怎样说未来计划，怎样说 notice period
9. 9. 怎样写简历，LMS 简历制作功能，怎样罗列自己的技能，怎样把项目经历写进简历
10. 10. 求职信的作用，怎样写求职信
LinkedIn & CV
1. 1. 校招和社招的要求，entry level vs junior level vs mid level
2. 2. 职场规划，沟通能力的重要性，team match 的重要性
3. 3. 澳洲公司情况，产品方向 vs 咨询方向
4. 4. 找工作网站的区别、建议
5. 5. 工作类型，permanent vs contractor，薪资期待，福利待遇
6. 6. 获取工作的方式：meetup、猎头、内推，如何区分和利用猎头，内推的作用
7. 7. 如何经营 linkedin：提高 SEO 和可读性、扩大人脉、利用 open network、写好 profile
8. 8. 招聘流程，怎样投简历，怎样说未来计划，怎样说 notice period
9. 9. 怎样写简历，LMS 简历制作功能，怎样罗列自己的技能，怎样把项目经历写进简历
10. 10. 求职信的作用，怎样写求职信
Interview 1
1. Interview Overview
2. - Preparation
3. - Process
4. - Format
5. - Code Test