专栏首页web前端教室web前端不止是JS和CSS,还有诗和远方。谈WEB前端工程化

web前端不止是JS和CSS,还有诗和远方。谈WEB前端工程化

标题起的有点骚包哈,其实是说,WEB前端的主战场是“前端工程化”。

前端就前端呗,为啥还要加个“工程化”?

很简单,因为前端变复杂了。复杂到必须把一个个网页切成许多块、零件,这些零七八碎的东西如何有效率的正确的组合起来让它们干活,这就需要有一个“章程”,一个“办法”,现在通用的称呼就是“前端工程化”。

工程化的定义有许多,我们不纠结所谓最准确的定义哈,那没有意义。无论它是什么定义,它的工作内容基本上都是大体相同的,“各种前端开发模式、MVC、MVVM、SPA之类的;一些自动化的更新、发布、模块管理、目录创建;团队协同开发、代码版本管理、合并;自动压缩、替换、合并请求等”,诸如此类的一些用来提高工作效率的事情,这些都在工程化的范畴之内。

现在我个人主观认为,前端学习有二条主线:一,是前端的技术本身;二,是前端工程化的进化。

这二条学习主线即是部分重叠的,但又有主次之分。必须先学好JS、CSS,才能学好前端工程化。而前端工程化本身的演进,又是随着实际业务而发展变化的。反过来新的业务需求,又要求有新的前端工作化,进而又要求有新的前端技术。

这二者是一条永无止境、互为表里的莫比乌斯环。

什么情况下,我们会认为一个人的前端开发水平,是上了一个档次,上了一个台阶呢?

大局观。

啥叫WEB前端开发的大局观?

站在前端的角度,全面的、多层次的审视“项目的全流程”。包括但不限于,提出需求,需求文档、UI设计、交互原型、开发规范、模块化、组件化、代码仓库、性能压缩、部署上线、开发流程与工具选型。这就是我以为的前端开发大局观。

在这一系列的要素之中,JS、CSS等纯代码类的内容,只占一小部分。剩下的要么是技术积累,要么是理解业务、工程优化的。

如果过于侧重技术与开发相关的内容,则必然导致“前端工程化”变为”前端工具化“,会陷入为了工程化而工程化的泥潭。

具体表现之一,就是经常换工具,一会这个,一会那个。真正的代码没多少,但开发环境一时半会稳定不下来。

前端工程化,并不是一个很虚的概念。正相反,它是一个很接地气的东西。不同公司,不同团队,不同产品,跨产品线,跨部门合作,这些不同的工作场景都需要有不同的工作流程,而规范这些工作流程的,就是前端工程化。

在理解业务,适应需求的前提下,

一,规范多人、多岗位的对接格式;

二,把能自动化的操作,都给自动化了;

这就是工程化。

甚至你可以更加简单粗暴的把前端工程化理解为“规范+流程+自动”。OK,你这么认为没有问题。

网上很多的前端工程化的相关文章,说一千道一万,其实也只是在说,如何制订规范?如何理顺流程?如何配置一系列的自动工具。

许多同学在初入前端的时候,眼里只有HTML、CSS、JS,这样并没有错,也必须这样,聚焦嘛。

但在这个阶段,你只是一个写页面的,NO NO NO,也许连写页面都算不上,也许你只是一个切静态页面的,顺便写点页面级别的JS交互脚本。

什么WEB前端开发,,什么前端工程师,这些名称跟此时的你,一点关系都没有。

但身处这个阶段并没什么不好意思的,也不丢人,这是每个前端人成长的必经之路。但你要做到,手里切的是页面,眼里看的是模块,心里装的是整个网站。

网站已经是一个事实上的在线网络应用软件了,那你在切页面的时候,有必要想一想,你手里的这个正在切的页面,或是正在写的小模块,在整个应用中,是处于什么样的位置、层级?

也许你没有答案,但你要想,要多想。要做到“虽不能至,心向往之”~

想什么呢?也许做为前端小白的你,脑子里此时空空荡荡。哈哈哈,想想你负责的部分,怎么能更有效率?如何能在各种业务场景中,以适当的方式加载所需资源?试着画出你所参加的项目的整体的结构图?你手里的哪些工作可以改为自动化?

网站这种实时在线的网络应用,它是免安装的,打开就用。各种资源怎么加载?如何更新?缓存咋整?你的页面加载流程是什么样的?合理不?。。

当你开始思考以上那些问题的时候,你才能真正的踏上成为“WEB前端工程师”的道路。

也许时间要很久,也许永远达不到。但心里一定要明白,前端工程化才是前端开发的广阔天地,也只有工程化的前端开发,才能让你真正的大有作为。

本文分享自微信公众号 - web前端教室(webfeel)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-12-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BFC用途总结

    前次写了一些关于BFC的基本概念,这次接上次的写一些BFC的应用。 BFC引起margin塌陷 在常规流中,盒子在垂直方向上从上到下排列。垂直方向之间的距离由单...

    前端黑板报
  • web前端工程师新手如何入门

    有很多想要学习web前端开发的新人都想自己能够快速的学习web前端开发,部分人因为自己基础比较薄弱,不知道自己该如何系统的学习,但是有着对web前端强烈的学习动...

    企鹅号小编
  • 前端零基础入门!前端真不难!

    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是...

    企鹅号小编
  • 纯CSS实现宽高相等(或者其他比例)

    动态实现宽高相等以及其它比例,一般使用的是JS。这次介绍一种使用纯CSS实现的方法。 基础结构与样式: 1 2<div class="box"> </div> ...

    前端黑板报
  • 如何提升Web页面的性能,HTML和css代码优化!

    怎么进步Web页面的功用,许多开发人员从多个方面来下手如JavaScript、图画优化、服务器配置,文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈...

    企鹅号小编
  • React Native之StyleSheet样式表

    概述 在React Native中,StyleSheet是实现了类似Web中CSS样式表的功能。最简单的使用如下,先定一个StyleSheet的样式表,然后在V...

    xiangzhihong
  • 【CSS选择符】后代选择符

    在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始...

    企鹅号小编
  • 类选择符和ID选择符

    类选择符 ? HTML代码: CSS代码: div { width: 200px; height: 200px; border: 1px solid #000;...

    企鹅号小编
  • 我的职业是前端工程师【五】: 前端工程师必会的六个调试技能

    我还是一个野生程序员的时候,不会 Debug,只会傻傻地写一句句 std::count。即使是在今天,有些时候我也会这样做:打一个 console.log,然后...

    Phodal
  • 我的职业是前端工程师:我要成为一个前端设计师

    我年轻的时候,是一个前端工程师。那时候,有这样一个传说:美工是最受妹子的欢迎,其次是半个美工的前端工程师。 本故事纯属瞎掰,如有雷同纯属巧合——Phodal @...

    Phodal

扫码关注云+社区

领取腾讯云代金券