8大实战项目通透Web前端开发001:开篇

2,257

@什么是大前端

  • 前端工程师

从狭义上讲,前端工程师使用 HTML、CSS、Javascript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。 从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。

image.png

  • 大前端 - 前后端分离

随着前后端职责和技术框架的分离发展,产品对前端的要求越来越高,用户对前端的期待越来越高,前端技术发展越来越快,导致前端这个岗位并没有像JSP时代那种画画页面就完事了。这部分体现的是前端的要求更高,责任越大了。

image.png

  • 大前端 / Node全栈

前后端分离后,前端要独立完成一个事情是不行的,因为缺少后台的支持。但是随着Node的出现,前端可以不用依赖后台人员,也不用学习新的后台语言,就可以轻松搞定后台的这部分事情。这样,面对一些小的系统,前端工程师就可以搞定整个系统。这部分体现了前端的全面性和全栈性。

image.png

  • 大前端 - 应对各种端

传统的前端工程师,一般指网页开发工程师,网站一般指运行在PC浏览器,慢慢的也要运行在手机上。但是,随着移动互联网的发展,突然冒出来更多的移动设备,比如:手机分为Android手机和苹果手机、智能手表、VR/AR技术支撑的可穿戴设备、眼睛、头盔、车载系统、智能电视系统等等。而这些设备都需要前端的支撑,这时候对前端的技术要求、能力要求就更高。这部分体现了前端的涉猎范围变大。

image.png

  • 大前端 - 微应用

当微信小程序出来以后,大家第一感觉是前端又可以火一把啦,不需要后台、不需要服务端,只需要在微信平台上开发网页就可以发布上线了。

而近期又有国内多个手机厂家联合推出快应用 , 跟小程序差不多,只是通过简单的前端开发发布以后,用户不需要安装应用就可以直接在类似于小米、vivo、oppo等手机上打开这样的应用。

类似于这些微应用,免后台、免安装的形式出现,也促使了前端这个行业也将涉及到这样的新型领域中,一起推动技术的进步。这部分体现了前端是时代发展的幸运儿

image.png


@前景与钱景

以下是BOSS直聘帝都Web前端开发岗位的搜索结果:

image.png

  • 客观地说,目前互联网行业在收缩,大家多多少少应该也听说大厂在裁员,但客观地说,在当前经济不景气的大背景下,互联网行业在可以预见的未来,依然是为数不多的能够为广大普通学子跳跃龙门获得基本体面生活的选项之一;
  • 在一线城市,3年实际开发经验的Web前端程序员的收入中位数约在15~20K之间,基本能超越95%的同龄人了;
  • 未来十年世界经济处在一个动荡下行周期内,国内也是各行各业都很卷,顺应时代呗我们别无他法!

@前端主要技术栈

下图是一个比较典型的Web前端开发岗的招聘需求:

image.png

总结起来主要技术如下:

  • PC/移动端静态页面布局技术:HTML5 + CSS3
  • 原生页面交互技术:JavaScript / TypeScript
  • Web服务端开发技术:NodeJS + Express/Koa2框架 + MongoDB/MySQL数据库
  • 组件化Web网站前端开发技术:Vue / React框架 / Angular框架
  • 组件化后台管理系统开发技术:Vue / React框架 / Angular框架
  • 微信小程序与多端开发:uniapp(基于Vue) / Taro(基于React)
  • 原生App开发:ReactNative / flutter

image.png


@本系列教程规划

本系列教程为零基础同学设计,共规划8大实战项目,形成108篇笔记,上车的同学每天跟着实操一个章节即可,上述的主要前端开发技术栈基本贯穿其间,源码见每篇文章末尾;

  • 项目1:美团PC端静态页布局,拳打PC端静态页面布局技术;
  • 项目2:美团PC端页面交互,脚踢JS页面交互基础;

image.png

  • 项目3:京东移动端布局,牙咬移动端布局技术;

image.png

  • 项目4:新浪微博全栈开发,手撕NodeJS服务端开发技术 + JS高级页面交互技术;

image.png

  • 项目5:美团外卖移动端开发,膝撞Vue框架基础;

image.png

  • 项目6:美团外卖中后台管理系统,肘击Vue框架高级;

image.png

  • 项目7:React中后台管理系统,爆肝React框架;

image.png

  • 项目8:网易云音乐小程序,狂虐uniapp多端开发技术;

image.png


@浅谈学习方法

  • 天天看视频就行了,不用写代码,基本就能月薪好几万了!
  • 但如果酒醒了,那就敲代码-总结,敲代码-总结,敲代码-总结;
  • 编程是关于动手的学科,把项目搞出来,漂亮、稳定、高效地长期运行起来就是唯一目标,也是老板给你发元子的唯一原因;
  • 凭你三言两语面试官是断然不会相信你能实现的,除非他对你有什么其它想法... 否则你们聊天的方式就是他撇着大嘴、翘着二郎腿对着你的简历大聊特聊项目、算法(大厂)、技术八股文!
  • 所以各位从学习的第一天起,你的唯一目标就是将来拿着一份简历去睡服一个倒霉的面试官,让他毕恭毕敬送上一份好几万的OFFER!
  • 所以简历写了吗?项目准备了吗?八股文背了吗?
  • 什么?啥都不会?那还不先夺其手机、断其网线、砸其ipad、卸其王者、吃鸡、原神...然后A屏打开代码,B屏打开搬砖的乔布梭...😠😠😠

@开发环境准备

  • 安装VSCode + 前期基础插件:

image.png

  • 安装PhotoShop用于分析美术设计稿,一路默认傻瓜式安装;
  • 安装Git源代码版本管理工具,一路默认傻瓜式安装;
  • 安装思维导图工具,末将用的是FreeMind,安装时先安装JRE再安装FreemMind,电脑中已安装JDK的同学可以无需安装JRE;

以上工具各位童鞋可以从末将的百度网盘下载,不都是最新版,够用即可:

链接:pan.baidu.com/s/1zXocTc4F… 提取码:2o4c

@获取源码

# 安装Git
# 任意文件夹右键,Git Bash Here
git clone https://gitee.com/steveouyang/fe8max-2301.git

Let's Go!

  • Love what u do rather than do what u love,既然选择了就要无条件热爱,精于所事方能苦中为乐,收获尊敬收获金钱收获妹子,如果只是一份工作人生未免就太辛苦了!
  • 还想再鸡汤一下,但时间来不及了(编不出来了)...
  • 目标星辰...目标秀技术撩妹搞钱!上车,出发!

c0PNCPjyVPE91D1Lbthlyr9WWSKFJ0g5MgWM8odBjqCet1541853499934.gif


参考资料

什么是大前端