首先, 你想知道前端是个啥, 那么你一定要知道前端是怎么来的! 回答比较长...... 大家有耐心的可以看下去, 综合了一些权威论坛上的资料而来.
前端其实是个很大的范畴. 我这里只针对 web 开发的前端而言(下文统称前端). 简单点说, 针对浏览器的开发, 浏览器呈现出来的页面就是前端. 它的实质是前端代码在浏览器端被编译, 运行, 渲染. 前端代码主要由三个部分构成: html(超文本标记语言),CSS(级联样式表),JavaScript. 如图:
前端开发工程师就业机会多, 创业机会多, 且就业范围广, 几乎各行各业都有需要, 互联网公司, 金融, 贸易等等都能进.
1, 前端工程化
在前端工程程化中, 开发者最重要的基本素养就是通过工具提升效率, 前端开发者在这些工具下会持续迭代和优化.
展望 2020 年前端的发展, 前端工程体系一定会更加闭环, 不再是一个脚手架这么简单, 而是会结合 IDE, 打通业务属性, 从项目初始化, 到编写代码, 到 CI, 到灰度, 到发布 形成一个完成的闭环.
2, 跨端开发
今年很多团队转战谷歌常态的 Flutter, 特别是 Flutter for Web 的第一个 Release, 这让 Web 前端重燃希望, 跃跃欲试.
同时, 苹果公司也发布了全新的 UI 系统 --SwiftUI, 同时, 开源社区中 SwiftUI for Web 已经在路上了, SwiftUI for Android 还会远吗?
跨端开发, Flutter 仍会快速发展, 并且会有更多的开发者, Flutter on JS,SwiftUIfor
跨端开发, Flutter 仍会快速发展, 并且会有更多的开发者, Flutter on JS,SwiftUIfor
3, 小程序
今年是微信小程序突飞猛进的一年, 在微信小程序出现以前, 大家在谈 Hybird,ReactNative, 但终归只是技术层面的狂欢, 始终没有业务属性的注入. 小程序的出现, 一方面告诉业界在当前设备上 Webview 也没差到哪去, 另外一方面告诉业界如何让有能力的商家在超级 App 上进行私域运营.
另一方面, 从技术角度说, 在上层 DSL 的严格限制下, 超级 App 就可定义符合自己诉求的 Web 标准, 弥补当前 Web 标准的不足, 最后和客户端配合, 结合离线, 预加载, 定制 Webview 能产出类似于 NSR 等各种酷炫的技术模型, 让 Web 在端内低成本达到 Native 版的体验, 端外也不会像 Weex 一样有点小别扭.
不过由于需要依赖超级 App(微信, 支付宝, 百度, 美团, 头条等), 由于各家平台采用的具体方案的差异, 造成目前小程序的落地方案也不一样, 有时候需要开发多套代码.
4,Serverless 让前端离业务更近
当前的前端工程师大多都是科班出身, 虽不能和正宗的服务端开发同学比, 但也可写很多服务端层的业务逻辑. 当前已经有很多公司在做 BFF 层, 来满足这部分诉求, 但依旧摆脱不掉 运维, 机器分配 这条拦路虎.
2019 年几乎所有知道名字的公司都在谈 Serverless(虽然并没有人知道如何落地 Serverless), 随着 Serverless 的逐步落地, BFF 这层的代码会摆脱运维, 机器分配等复杂的问题, 同时大概率会由前端同学写这部分代码, 服务端同学专注中台系统的实现. 从业务上说, 业务的试错成本也会大幅度降低.
5,5G
2019 年一个绕不开的话题就是 5G. 首先, 5G 带宽的增幅提升带来传统 Web 前端复杂度的进一步提升, 如同 2G 到 4G 变化过程中从 WAP 的纯文本超链接时代变化到 4G 全图片视频时代. 5G 对于 Web 前端的变化必将是巨大的, 但肯定不会一蹴而就. 因为相应的配套设施也需要逐步完善, 如硬件性能和浏览器的处理速度. 服务端渲染 (SSR) 肯定是其中一个捷径, 轻前端重后台, 5G 是桥梁, 把渲染放后台, 不像同构那么简单, 需要关注和优化渲染性能. WebAssembly 或许会在这个机遇下得到快速发展, 因为它可以无缝对接后台多种语言, 前后台渲染的优化也会带来前端研发模式和技术架构的变化.
其次, 5G 带来的万物互联, 将带来有别于智能手机和普通 PC 的多样化的应用场景, VR, 可穿戴设备, 穿载系统, 智能投影, 智能交互等会把 Web 带到各种各样的垂直领域, 这也意味着前端将有更多广阔的空间. 相信随着 5G 的大规模商业, 会诞生一批新的互联网巨头.
以上, 大家能理解多少就理解多少, 其实对于初学者来说, 大家是接触不到这个层次的, 新技术的学习, 更多的是锻炼 1-5 年的前端开发工程师. 总的以上就是回答前端到底有没有前途, 学完之后是不是找不到工作了, 或者钱少了. 这个你不用担心, 技术在手, 天下你有. 技术不行怎么办? 学啊, 做程序员, 你不学是拿不到多少钱的, 多的是 3,5 年工龄的程序员被倒勾, 抱怨工资没有应届生的高, 说实话, 抱怨是没有用的.
Web 前端的工资情况:
全国前端开发平均工资:¥9541 元 / 月, 最低工资 2K-3K, 最高工资 20K-30K.
北京前端开发平均工资:¥13220 元 / 月, 最低工资 4.5K-6K, 最高工资 30K-50K.
上海前端开发平均工资:¥13460 元 / 月, 最低工资 4.5K-6K, 最高工资 30K-50K.
Web 前端课程包括了几个方面的内容:
第一阶段: HTML+CSS:HTML,CSS 基础, div+CSS 布局
JavaScript 基础: JS 基础教程, JS 内置对象常用方法, 常见 DOM 树操作大全, ECMAscript,DOM,BOM, 定时器和焦点图.
JS 基本特效: 例如: tab, 导航, 整页滚动, 轮播图, JS 制作幻灯片, 弹出层, 手风琴菜单, 瀑布流布局, 滚动事件, 滚差视图.
JS 高级特征: 正则表达式, 排序算法, 递归算法, 闭包, 函数节流, 作用域链, 基于距离运动框架, 面向对象基础
jQuery 基础使用: 悬着器, DOM 操作, 特效和动画, 方法链, 拖拽, 变形, JQueryUI 组件基本使用
第二阶段: HTML5 和移动 Web 开发
HTML5:
HTML5 新语义标签, HTML5 表单, 音频和视频, 离线和本地存储, SVG,Web Socket,Canvas.
CSS3:
CSS3 新选择器, 伪元素, 脸色表示法, 边框, 阴影, background 系列属性改变, Transition, 动画, 景深和深透, 3D 效果制作, Velocity.JS 框架, 元素进场, 出场策略, 炫酷 CSS3 网页制作.
Bootstrap:
响应式概念, 媒体查询, 响应式网站制作, 删格系统, 删格系统原理, Bootstrap 常用模板, Less 和 Sass.
移动 Web 开发:
跨终端 Web 和主流设备简介, 视口, 流式布局, 弹性盒子, rem, 移动终端 JavaScript 事件, 手机中常见 JS 效果制作, Zepto.JS, 手机聚划算页面, 手机滚屏
第三阶段: HTTP 服务和 Ajax 编程
Web 服务器基础: 服务器基础知识, Apache 服务器和其他 Web 服务器介绍, Apache 服务器搭建, HTTP 介绍.
PHP 基础: PHP 基础语法, 使用 PHP 处理简单的 GET 或者 POST 请求,
Ajax 上篇: Ajax 简介和异步的概念, Ajax 框架的封装, XMLHttpRequest 对象详细介绍方法, 兼容性处理方法, Ajax 框架的封装, Ajax 中缓存问题, xml 介绍和使用.
Ajax 下篇: JSON 和 JSON 解析, 数据绑定和模板技术, JSONP, 跨域技术, 图片预读取和 lazy-load 技术, jQuery 框架中的 AjaxAPI, 使用 Ajax 实现爆布流案例额.
第四阶段: 面向对象进阶
面向对象终极篇: 从内存角度到理解 JS 面向对象, 基本类型, 复杂类型, 原型链, ES6 中的面向对象, 属性读写权限, 设置器, 访问器.
面向对象三大特征: 继承性, 多态性, 封装性, 接口.
设计模式: 面向对象编程思维, 单例模式, 工厂模式, 策略模式, 观察者模式, 模板方法模式, 代理模式, 装饰者模式, 适配器模式, 面向切面编程.
第五阶段: 封装一个属于自己的框架
框架封装基础: 事件流, 冒泡, 捕获, 事件对象, 事件框架, 选择框架.
框架封装中级: 运动原理, 单物体运动框架, 多物体运动框架, 运动框架面向对象封装.
框架封装高级和补充: jQuery 框架雏形, 可扩展性, 模块化, 封装属于传智自己的框架.
第六阶段: 模块化组件开发
面向组件编程: 面向组件编程的方式, 面向组件编程的实现原理, 面向组件编程实战, 基于组件化思想开发网站应用程序.
面向模块编程: AMD 设计规范, CMD 设计规范, RequireJS,LoadJS, 淘宝的 SeaJS.
第七阶段: 主流的流行框架
Web 开发工作流: Git/SVN,Yeoman 脚手架, NPM/Bower 依赖管理工具, Grunt/Gulp/Webpack.
MVC/MVVM/MVW 框架: Angular.JS,Backbone.JS,Knockout/Ember
常用库: React.JS,vue.js,Zepto.JS.
第八阶段: HTML5 原生移动应用开发
Cordova:WebApp/NativeApp/HybirdApp 简介, Cordova 简介, 与 PhoneGap 之间的关系, 开发环境搭建, Cordova 实战(创建项目, 配置, 编译, 调试, 部署发布).
Ionic:Ionic 简介和同类对比, 模板项目解析, 常见组件及使用, 结合 Angular 构建 App, 常见效果(下拉刷新, 上拉加载, 侧滑导航, 选项卡).
React Native:React Native 简介, React Native 环境配置, 创建项目, 配置, 编译, 调试, 部署发布, 原生模块和 UI 组件, 原生常用 API.
HTML5+:HTML5 + 中国产业联盟, HTML5 Plus Runtime 环境, HBuilder 开发工具, MUI 框架, H5 + 开发和部署
第九阶段: Node.JS 全栈开发:
快速入门: Node.JS 发展, 生态圈, Io.JS,Linux/Windows/OS X 环境配置, REPL 环境和控制台程序, 异步编程, 非阻塞 I/O, 模块概念, 模块管理工具, 开发流程, 调试, 测试.
核心模块和对象: 全局对象 global,process,console,util, 事件驱动, 事件发射器, 加密解密, 路径操作, 序列化和反序列化, 文件流操作, HTTP 服务端与客户端,
Web 开发基础: HTTP 协议, 请求响应处理过程, 关系型数据库操作和数据访问, 非关系型数据库操作和数据访问, 原生的 Node.JS 开发 Web 应用程序, Web 开发工作流, Node.JS 开发 Blog 案例.
快速开发框架: Express 简介 + MVC 简介, Express 常用 API,Express 路由模块, Jade/Ejs 模板引擎, 使用 Express 重构 Blog 案例, Koa 等其他常见 MVC 框架.
Node.JS 开发电子商务实战: 需求与设计, 账户模块注册登录, 会员中心模块, 前台展示模块, 购物车, 订单结算, 在线客服即时通讯模块.
设计模式, 数据结构, 算法, 框架设计原理(前端的高级知识, 主要学习语言的底层, 项目的原理)
有提过咱们的学习圈, 也是我跟朋友们一起建立的学习基地, 我也会在里面免费给大家传授前端知识, 帮助大家解决前端学习上的迷茫, 找到正确的方向来学习, 技术也是最新的技术, 大家可以放心.
一个人学习会有迷茫, 动力不足. 这里推荐一下我的前端学习交流 qun: 四八四, 七五七, 七六零, 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 有想学习 Web 前端的, 或是转行, 或是大学生, 还有工作中想提升自己能力的, 正在学习的小伙伴欢迎加入学习.
来源: http://www.jianshu.com/p/e6ab5c9bf353