为何说 JavaScript 开发很疯狂

【编者按】本文作者为 Sean Fioritto,主要阐述了 JavaScript 开发为何让人有些无从下手的根本原因。文章系国内 ITOM 管理平台 OneAPM 编译呈现。

网络开发乐趣多多!Javascript 却……让人望而却步。

网页开发的其他所有东西都很配合,唯独到了 Javascript,你会感觉好像比别人少了一大块基础知识,完全搞不懂它。

事实就是,没错,你的确缺了几块拼图。

不过,前端开发的现状其实也很疯狂。

并不是只有你感到抓狂。

拉把椅子坐下来。该写个 Javascript 应用了。

首先要搭建和运行本地环境。是用 Gulp,还是 Grunt,都不好……还是用 NPM 脚本吧!

Webpack 还是 Browserify?(不好意思地)还是 Require.js?要升级到 ES6 吗?在预处理中加入 Babel 是不是太过了?

行为驱动开发还是常规的单元测试?应该选用哪种断言框架?如果能从命令行运行测试当然是好事,那何不试试 PhantomJS?

Angular 还是 React?Ember 呢?Backbone 怎么样?

有些 React 文档写道:“Redux 是 JavaScript 应用可预见的状态容器。”太棒了!你肯定需要来一个。

为什么搭建 Javascript 应用会这么疯狂?!

让笔者来帮你弄明白为什么这些看起来都这么疯狂。首先看个例子,然后再看漂亮的图片。

以下是 React 的“Hello, world!”应用。

// main.js
var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('example')

  );

这还没完。

$ npm install --save react react-dom babelify babel-preset-react

$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

其实中间缺了几个步骤,比如说安装 browserify,还有完成这些之后还要做什么,才能让它在网页上运行,因为仅仅这些并不能生成一个有用的网页。

完成这些之后,会得到一个名为 bundle.js 的文件,里面就是新的 React Hello World 应用,包含 19374 行代码。接下来,只需要安装 browserify、 babelify 和 react-dom,然后衡量未知的成千上万条代码。

基本上就是这样……

现在用基本的 Javascript 来写一个 hello world 应用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello World</title>
  </head>

  <body>
    <div id="container"></div>
    <script>
     document.body.onload = function(){
       var container = document.getElementById("container");
       container.innerHTML = '<h1>"Hello, world!"</h1>';
     }
    </script>
  </body>
  </html>

这就是全部内容。18行代码。你可以把它们复制、粘贴到一个叫 index.html 的文件,双击加载到你的浏览器。好了。

如果此刻你对自己说:“但是,等一下,React 能做的可不止你刚才写的那点儿小东西,你不能那么写 Javascript!”这话(大部分)是正确的,你很快就会发现为什么所有东西都这么疯狂了。

现在可以看到笔者提到的图片了。

你要创建的 Javascript 网页应用基本上都会出现在钟形曲线中间的某个位置。在中间位置,如果一开始你用了 React 全栈,那么你的应用从一开始就极大地违背了设计标准。

这就是为什么所有东西都很疯狂。你以为你必须使用的工具大部分都是为了解决现在未出现,或者永远都不会出现的问题

再看一下这张图:

Javascript 开发现状让人无措又迷惑,因为所有人并没有意识到,在默认状态下,他们的应用已经违背了设计标准。

你该如何开始搭建 Javascript 应用?你应该用 React 或 Angular 这样的工具吗?要是不用该怎么办?测试到底有没有必要?还要用 Javascript 生成标记吗?在开始搭建默认的庞大技术堆栈之前,这些都是你应该回答的问题。开始开发 Javascript 应用时,关键在于在钟形曲线上选取一个点,作为你的应用最终复杂程度的上限。

坦白说,要实现这一点需要经验。不过还是有很多 Javascript 应用可以借鉴的出发点的:Jquery 加上客户端模板,还有一个非常简单的构造工具,用来连接和减少生产文件(假设你的后台框架还没有这项功能)。

如果你了解了如何正确构造 Javascript 应用,你就会逐渐明白如何、何时以及为什么要使用框架、npm、require、webpack 或 es6,何时要写测试,何时应该在本地测试,何时应该在浏览器测试,以及其他会出现的问题和麻烦。

本文转自 OneAPM 官方博客

原文地址: http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/

时间: 2024-11-02 13:34:04

为何说 JavaScript 开发很疯狂的相关文章

分析模块化的JavaScript开发的优势在哪里?

如今模块化的 JavaScript 的开发越来越火热,无论是模块加载器还是优秀的 JavaScript 模块,都是层出不穷.既然这么火,肯定是有存在的理由,肯定是解决了某些实际问题.很多没接触过模块化 JavaScript 开发者不禁要问,我真的需要模块化吗,模块化相比于传统的模式有什么优势? JavaScript 本身是没有模块化支持的,很多语言多有,就连CSS都有这样的加载方式. @import "fed.css"; 虽然因为性能问题不推荐CSS这样来进行加载,但这是一种模块化的思

JavaScript开发规范 降低代码与XHTML耦合性

作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安 全以及执行效率上的问题.本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用"愉快"来形容了.现在本人撰写此文的目的除了与大家分享 一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.当然,如果我说的有不科学的地方还希望各路前辈多多指教.下面分条目列出各种规范要 求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其

分享9个最好用的JavaScript开发工具和代码编辑器

  这篇文章主要介绍了9个最好用的JavaScript开发工具和代码编辑器,需要的朋友可以参考下 Web设计和开发是现今越来越流行的职业方向之一.工欲善其事,必先利其器,如果你想在这个领域出类拔萃,那么你就必须具备一些优秀的技能,例如能操作不同的平台.IDE和其他各种各样的工具. 谈到平台和IDE,现在已经不是以前那个掌握一个IDE就能"一招鲜吃遍天"的时代了.激烈的竞争以及蔓延到现在的集成开发环境.基于IDE是用于创建和部署应用程序的强大客户端应用程序,下面我们要分享的就是对于很多网

使用重构件(Codemod)加速 JavaScript 开发和重构

本文讲的是使用重构件(Codemod)加速 JavaScript 开发和重构, 使用重构件(Codemod)加速 JavaScript 开发 在花园里耕耘乐趣无穷,但如果除草不勤,最后收获可能是一团揪心.漏掉一次除草本身可能并无大碍,但积少成多最后会毁掉整座花园.没有杂草的花园让维护工作神清气爽.这个道理对代码库也类似. 我通常讨厌除草,经常忘记这事的结果就是一团糟.谢天谢地在编程界有像 ESLint 和 SCSS-Lint 这样的好东西提醒我们勤理代码.但是如果面对的是大段大段的历史代码,光是

百度地图JavaScript开发入门教程

        自从openGPS.cn小编在2011年的一个WEB项目中用到了百度地图做售楼数量分布显示功能之后,就一发不可收拾,在位置服务的领域一路走了5年之久.今天难得时间充裕,给WEB开发者分享一点自己的经验,希望能够给到新接触百度地图JavaScript开发的朋友们一些帮助.         百度地图JavaScript开发第一步,得会看资料.很多新手,是因为连基本的页面怎么打开都不知道,重度依赖搜索引擎去搜出来百度地图开发官方站点,从而记不住操作过程,回头却找不到用过的页面,不会操作

5常见的JavaScript开发错误避免

JavaScript是网络的动态语言,它被全球开发人员广泛接受.事实上,JavaScript的普及为其伟大的社区做出了贡献. <> 目前,新的图书馆,框架和工具经常被发布,使JavaScript更强大,在有能力的开发人员手中是非常有用的,而其已建立的资源随着时间的推移不断改进. JavaScript是活动存储库中名为GitHub的第一种语言. 在LiveEdu.tv中也可以看到同样的趋势,其中有48,567个JavaScript相关视频是由热心学习者和工程师的用户群创造的,他们希望提高自己的职

JavaScript开发规范要求

原文http://www.cnblogs.com/webflash/archive/2010/06/11/1756255.html   作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码 维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题.本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能 用"愉快"来形容了.现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.当

2015年最新的搭建MyEclipse2014+Spket+ExtJS4.1.1的 javascript开发环境

问题描述 [align=center][align=center]2015年最新的搭建MyEclipse2014+Spket+ExtJS4.1.1的javascript开发环境介绍[/align] [/align]此篇文章凝聚了我近一个星期的心血,终于安装成功,网上很多以前写的文章好多已经不再适用了,在此将我的经验共享给大家,一来感谢网上贡献资料的网友,二来避免大家像我一样绕弯,闲话不多说,下面开始介绍.一前期准备,方案选择及正确的下载文件刚开始安装了免费的Eclipse,大家可以看到安装成功了

Meteor:快到飞起来的全栈JavaScript开发平台

"meteor"这个单词的意思是"流星",流星的特点是快,一闪而过:同样,Meteor作为一个开源的全栈JavaScript开发平台,特点就是快,目标是为开发者提供一个快速开发的平台. 本文选自<Meteor全栈开发>一书,将向您介绍Meteor为何如此之快! Meteor是什么 Meteor是一个开源的全栈JavaScript开发平台,构建在 Node.js和 MongoDB 之上.全栈开发平台已经有不少了,Meteor有什么特色呢? 虽然Meteor