Skip to content

四火的唠叨

一个纯正程序员的啰嗦

Menu
  • 所有文章
  • About Me
  • 关于四火
  • 旅行映像
  • 独立游戏
  • 资源链接
Menu

一个前端项目,到底要集成多少库和工具

Posted on 03/12/201706/23/2019 by 四火

最近忙于一些新做的项目,由于新入手,就想着往最佳实践去靠,也寻找一些可以借鉴的模板。其中前端的部分,有很成型的模板可以借鉴。大幅度减少了自己调查和集成的工作量。但是仔细看看,发现这里头的概念太多了,各种开源的库和工具,有人说 “前端玩的是广度” 是有道理的。

这个新项目并不算特别复杂,大致的技术是基于 React+Redux 的,但是大体上集成完毕以后,完成了几个 demo 的代码之后,粗粗地过了一遍,除了传统意义上的 HTML+CSS+JavaScript(遵循 ECMAScript 6 的标准)三大件,居然涉及到了那么多技术,把自己吓了一跳:

  • React: an open-source declarative JavaScript library for building user interfaces.
  • Redux: a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
  • Webpack: constructs two separate dependency graphs and emits bundle (compressed) files.
  • Gulp: a task/build runner for development, who can compile sass files, uglify and compress js files and much more.
  • Karma: a tool that enables the running of source code (i.e. JavaScript) against real browsers via the CLI.
  • NPM: Node Package Manager, who provides two main functionalities: Online repositories for node.js packages/modules which are searchable on search.nodejs.org. Command line utility to install Node.js packages, do version management and dependency management of Node.js packages.
  • ESLint: a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
  • PhantomJS: a headless WebKit scriptable with a JavaScript API, or in simple terms, PhantomJS is a web browser without a graphical user interface.
  • Jasmine: Jasmine is a behavior-driven development framework for testing JavaScript code.
  • Material-UI: A Set of React Components that Implement Google’s Material Design.
  • Oboe.js: an open source Javascript library for loading JSON using streaming, combining the convenience of DOM with the speed and fluidity of SAX.
  • Babel: a configurable transpiler, a compiler which translates from Javascript to Javascript unlike a compiler which translates high level application code into lower level code or binaries.
  • …

还有一些次要或者简单一些的就不列出了。在 package dependency 的配置文件中,我数了一下这些大大小小的依赖库、框架和工具,差不多有三十项。在这里我不想展开叙述每一项到底是用来做什么的,以及怎样集成到一起的。我倒是想说说杂七杂八的感受:

虽然写了好些年前端代码了,但这里面超过一半的技术以前并未深入使用过,因此这个项目让我觉得获益匪浅。我大概花了五个工作日时间把这些没接触过的和接触过但尚且夹生的技术,挨个摸了一遍,完全摸清摸透在那么短时间内是不可能的,但是至少从概念上、意义上,以及怎样使用上心中有谱,并且了解了一些最佳实践的方式。

前端的技术确实如百花齐放,发展速度太恐怖了,但是总感觉缺少头绪,除了那些好些年不怎么办变化的基础,需要有一些意在最佳实践的开源项目来梳理梳理,把这些东西像 IDE 整合一大堆插件一样整合起来,天下代码一大抄,这会给很多项目开头的工作减少很多成本。我想起几年前用的 Grails,就干了类似的事情,但它并非是着力于前端的,因此还是很不一样的。

在接触软件以后,我的学习范畴一直是软硬通吃,前后兼修,一直到现在也是。从论坛门户网站,分布式服务到大数据处理的代码都写过,还写过满是业务的存储过程,赶鸭子上架的手机端代码,甚至切过图。但是要打磨更深刻的专业技术能力,日后应当更专注于专精某一领域。之前我讲过,所谓的全栈,大多数情况下并没有明显优势,除非一些特殊的团队角色,或者创业。

在没有一定深度和一定领域内的广度的情况下,所谓的 “精通” 和 “掌握” 都只能是笑笑而已。就好比去考察一些号称 “精通 JavaScript” 的工程师,那么多开源库只是用过 JQuery 而已。遇到这种情况其实没有必要再深入问下去了。前端的团队更需要专业的人才。

很多人都知道,一个前端工程师在国内往往受到一定程度的轻视。其实不光在国内,国外也不见得有多少改善。比如在 Amazon,一个 WDE(Web Development Engineer)的发展渠道,就是远不如一个传统意义上的 SDE 通畅,Principal 也少得多。事实上,有人觉得这些东西玩得再转,也不得不基于这小小的浏览器而已。后来我们发现这话完全不对,再后来我们发现以往那些给工程师分类的界限越来越模糊。现在 NodeJS 已经满世界跑了,就算不用 NodeJS 来掌管服务端,也不得不接受和使用基于它的一些工具。因此我相信这个不公平的现象会逐渐好转,虽说这个过程看起来会很漫长。

最后,工作了超过八年,如今的我依然觉得,一个项目组吸引我的最大因素在技术层面。似乎所有人都在谈 impact,但是那些有趣的新技术,哪怕有时只是一些小技术和小点子,都能令我在半夜的时候想到了笑出声来。因为一个项目,写一写新鲜的代码,用一些新鲜的方式,学一些新鲜的技术,真是工作中莫大的享受。

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接 《四火的唠叨》

×Scan to share with WeChat

你可能也喜欢看:

  1. Notes: Hadoop-based open source projects
  2. Process and Corporate Culture
  3. JavaScript 实现继承的几种方式
  4. EasyMock、EasyMock Class Extension 和 PowerMock
  5. JavaScript 并发下载

4 thoughts on “一个前端项目,到底要集成多少库和工具”

  1. 多喝热水 says:
    10/31/2023 at 7:19 PM

    十分怀念 jquery 那个时代,前端开发简单没有那么多的复杂工具,不知道后续的 htmlx 能不能让前端开发返璞归真

    Reply
  2. Nebula says:
    06/09/2018 at 6:55 AM

    你好,请问您有一些 “最佳实践的开源项目” 推荐吗?目的是像你一样通过这些项目了解梳理下前端技术, 谢谢!

    Reply
  3. 小无路 says:
    03/13/2017 at 5:37 PM

    … 作为一个前端。。我也觉得虽然前端发展迅猛,但是还是要打好基础,,不要被全栈忽悠了。。。

    Reply
  4. laixintao says:
    03/12/2017 at 5:44 PM

    我们的项目不是 React+Redux 的,不过这个列表中除了这两个我们大多数也用到了,还有 CoffeeScript, Scss, vue, angular, bootstrap,yarn, 以及各种第三方的插件……

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

订阅·联系

四火,啰嗦的程序员一枚,现居西雅图

Amazon Google Groovy Hadoop Haskell Java JavaScript LeetCode Oracle Python Spark 互联网 前端 华为 历史 同步 团队 图解笔记 基础设施 工作 工作流 工具 工程师 应用系统 异步 微博 思考 技术 数据库 曼联 测试 生活 程序员 管理 系统设计 缓存 编码 编程范型 英语 西雅图 设计 评审 问题 面试 项目

分类

  • Algorithm and Data Structure (30)
  • Concurrency and Asynchronization (6)
  • System Architecture and Design (43)
  • Distributed System (18)
  • Tools Frameworks and Libs (13)
  • Storage and Data Access (8)
  • Front-end Development (33)
  • Programming Languages and Paradigms (55)
  • Testing and Quality Assurance (4)
  • Network and Communication (6)
  • Authentication and Authorization (6)
  • Automation and Operation Excellence (13)
  • Big Data and Machine Learning (5)
  • Product Design (7)
  • Hiring and Interviews (14)
  • Project and Team Management (14)
  • Engineering Culture (17)
  • Critical Thinking (25)
  • Career Growth (57)
  • Life Experience and Thoughts (45)

推荐文章

  • 谈谈分布式锁
  • 常见分布式系统设计图解(汇总)
  • 系统设计中的快速估算技巧
  • 从链表存在环的问题说起
  • 技术面试中,什么样的问题才是好问题?
  • 从物理时钟到逻辑时钟
  • 近期面试观摩的一些思考
  • RSA 背后的算法
  • 谈谈 Ops(汇总 + 最终篇):工具和实践
  • 不要让业务牵着鼻子走
  • 倔强的程序员
  • 谈谈微信的信息流
  • 评审的艺术——谈谈现实中的代码评审
  • Blog 安全问题小记
  • 求第 K 个数的问题
  • 一些前端框架的比较(下)——Ember.js 和 React
  • 一些前端框架的比较(上)——GWT、AngularJS 和 Backbone.js
  • 工作流系统的设计
  • Spark 的性能调优
  • “残酷” 的事实
  • 七年工作,几个故事
  • 从 Java 和 JavaScript 来学习 Haskell 和 Groovy(汇总)
  • 一道随机数题目的求解
  • 层次
  • Dynamo 的实现技术和去中心化
  • 也谈谈全栈工程师
  • 多重继承的演变
  • 编程范型:工具的选择
  • GWT 初体验
  • java.util.concurrent 并发包诸类概览
  • 从 DCL 的对象安全发布谈起
  • 不同团队的困惑
  • 不适合 Hadoop 解决的问题
  • 留心那些潜在的系统设计问题
  • 再谈大楼扔鸡蛋的问题
  • 几种华丽无比的开发方式
  • 我眼中的工程师文化
  • 观点的碰撞
  • 谈谈盗版软件问题
  • 对几个软件开发传统观点的质疑和反驳
  • MVC 框架的映射和解耦
  • 编程的未来
  • DAO 的演进
  • 致那些自嘲码农的苦逼程序员
  • Java 多线程发展简史
  • 珍爱生命,远离微博
  • 网站性能优化的三重境界
  • OSCache 框架源码解析
  • “ 你不适合做程序员”
  • 画圆画方的故事

近期评论

  • + 1.943624 BTC.NEXT - https://graph.org/Ticket--58146-05-02?hs=9a9c6f8dfe3cdbe0074006e3e640b19b& on 所有文章
  • Anonymous on 闲聊投资:亲自体验和护城河
  • 四火 on 关于近期求职的近况和思考
  • YC on 关于近期求职的近况和思考
  • mafulong on 常见分布式基础设施系统设计图解(四):分布式工作流系统
  • 四火 on 常见分布式基础设施系统设计图解(八):分布式键值存储系统
  • Anonymous on 我裸辞了
  • https://umlcn.com on 资源链接
  • Anonymous on 我裸辞了
  • Dylan on 我裸辞了
© 2025 四火的唠叨 | Powered by Minimalist Blog WordPress Theme