web前端页面开发工具的演进史

article/2025/11/3 19:12:17

小编是一位有着6年前端开发经验的web前端开发工程师,今天小编从个人的视角来聊一聊web前端开发工具的演进史。

小编第一次接触 web前端开发是在2011年,那会还在上高中。当时正是大家都每天忙碌着装扮自己的QQ空间。那时的web前端布局还是以 `<table>` 布局为主要基调的年代,有着“网页三剑客”美誉之一的 `Dreamweaver` 此时还是前端开发工具的香饽饽,是集网页制作和管理网站于一身的所见即所得网页代码编辑器。通过菜单和属性面板能快速的实现页面的布局。

随着 `JavaScript` 技术在web前端领域的大放异彩,`<table>` 布局也渐渐被更受欢迎的 `<div> + css` 布局所取代。人们逐渐觉得 `Dreamweaver` 并不适合当下的前端开发。此时大家发觉 `Sublime Text` 是一个不错的选择,它具有漂亮的用户界面和强大的功能。支持多种编程语言的语法高亮、拥有优秀的代码自动完成功能,还拥有代码片段的功能,可以将常用的代码片段保存起来,在需要时随时调用。

在被 `Sublime Text` 为主要开发工具的统治了许久后,广大的web前端开发者们又想拥有像 `IntelliJ IDEA` 一样优秀的IDE工具。就在2017年拥有着同`IntelliJ IDEA`一样血统的Web前端开发神器 `WebStorm` 出现了。它功能的强大是其它开发工具完全不能比肩的,获得过“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等诸多荣誉。

国内的 Dcloud 公司推出过 `Hbuilder` 后来中国的移动互联网时代逐渐变成了“小程序时代”,各家小程序层出不穷,让前端开发者们的工作量井喷式增长。随后在 2019 年 Dcloud 公司又推出了更强大,支持多端开发的 `HbuilderX`。

直至今日 `WebStorm` 的光环依旧耀眼,`HbuilderX` 也在开发者们的心中扎根了。

人类都有懒惰的基因,重复的劳动,无休止的编码终究得不到解脱,想拥有一个“无码”的开发工具。早在 2014 年就诞生过 “低代码平台” 的概念,国内许多企业也在如火如荼的建造着这个美好的“无码世界”,随之涌现出了一批的低代码平台的服务商。

结果是低代码平台的实际使用情况并不乐观,总结的缺点有以下几点:

  1. 使用门槛高,低代码开发仍需要编写代码,开发者必须具备数据库和代码编写的专业知识。

  2. 业务流程只能随着组件改变。组件的功能和种类,限制了应用程序的开发,无法满足有特色的需求。

  3. 低代码开发的新程序对企业原有的旧软件的集成受限。

  4. 低代码开发工具交给普通开发人员使用,意味着企业冒着一定的风险。

低代码平台有着以上4个无法解决的痛点,开发这件事又重新回到了“程序开发工程师”的身上。国内的低代码平台也一直是这种不温不火的状态,广大开发者们的内心也止不住的骚动,想在开发效率和良好的扩展性上找到出口。

2021年小编偶然的机会进到了一个微信群,了解到  codeFun。听说这玩意可以把UI设计稿还原成前端页面,瞬间觉得这货牛B坏了。于是乎小编利用上班(摸鱼)时间体验的一把。

 codeFun初体验总结

codeFun是UI设计稿智能⽣成源代码解决⽅案,域名https://code.fun。codeFun的核⼼能⼒是UI 设计稿⼀键⽣成源代码,能让传统研发流程的8小时基于codeFun流程在10分钟完成。能实际的解决研发成本、交付速度、产品质量问题,可谓是甲⽅、CEO、CTO、项⽬经理的福音,更是前端开发者的摸鱼神器!

codeFun使用优点总结

  1. 支持框架多:Vue、React、微信小程序、HTML5、uni-app、Taro 这些 web前端常用的框架都基本覆盖了。

  2. 支持的平台多:借助 uni-app、Taro 这类优秀的跨平台解决方案,能轻松实现跨平台应用的需求。

  3. UI还原度高,这个是非常重要的功能啦,大家也可以前往 https://code.fun 亲身体验。

  4. 生成页面的代码有语义化,这对于后期的维护来说是无比重要的,缺少语义化的代码,就如同修改“前同事”留下的无注释代码一样痛苦。

体验效果图


http://chatgpt.dhexx.cn/article/jQhC3mVu.shtml

相关文章

关于Webpack前端工程化构建,你必须要掌握这些核心知识点

引言 在很久之前&#xff0c;模块化管理还没有出现&#xff0c;如果我们开发一个页面想要引入一些依赖的话&#xff0c;最常见的做法就是将依赖文件引入到.html文件中。比如&#xff0c;我们要使用JS的一些依赖库&#xff0c;就要在.html文件中使用<script>标签引用&…

构建工具 Vite、Webpack、Rollup对比

Webpack介绍 热更新方面&#xff1a;webpack支持HMR&#xff0c;但是webpack需要全部重新编译并更新&#xff0c;效率较低tree-shaking&#xff1a;webpack2开始支持且消除效果不好&#xff0c;但是webpack5有更好的tree-shaking&#xff08;去除未使用代码&#xff09;分包方…

前端三大构建工具 Webpack、Vite、Rollup 优劣势及原理分析

在刚刚结束的 VueConf2021 中&#xff0c;除了 Vue 3.0 以外&#xff0c;另外一个亮点就是下一代构建工具 Vite 了。 在尤雨溪分享的【 Vue 3 生态进展和计划】的演讲中&#xff0c;尤大神还特意提到 Vite 将成为 Vue 的现代标配。甚至最近新推出的 Petite Vue 从开发、编译、发…

从Npm Script到Webpack,6种常见的前端构建工具对比

从Npm Script到Webpack&#xff0c;6种常见的前端构建工具对比 小编说&#xff1a;历史上先后出现了一系列构建工具&#xff0c;它们各有优缺点。由于前端工程师很熟悉JavaScript&#xff0c;Node.js又可以胜任所有构建需求&#xff0c;所以大多数构建工具都是用Node.js开发的。…

前端开发入门:前端构建工具百度FIS

FIS是什么&#xff1f; FIS全称为Front-end Integrated Solution&#xff0c;即前端集成解决方案。前端团队发展大多会经历规范设计、技术选型、系统拆分、性能优化等阶段&#xff0c;其中的技术需求可以总结为前端集成解决方案。FIS是专为解决前端开发中自动化工具、性能优化…

前端工程化——构建工具选型

一、什么是前端工程化 前端工程化是依据业务特点&#xff0c;将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体系。 二、为什么要前端工程化 实现前端工程化的目的简单来说就是通过流程规范、自动化工具来提升前端的开发效率、性能、质量、多人协作…

前端构建工具与应用程序测试

1、前端构建工具 什么是前端构建&#xff1f; 什么是构建工具&#xff1f; 自动构建工具 Npm Scripts&#xff08;推荐&#xff09; Npm Scripts&#xff08;NPM脚本&#xff09;是一个任务执行者。NPM是安装Node时附带的一个包管理器&#xff0c;Npm Script 则是 NPM 内置…

前端构建工具gulp的详细介绍以及使用

什么是 gulp为什么要用 gulp如何使用 gulp Installing Gulp Install the gulp commandInstall gulp in your devDependencies Create a gulpfileTest it out gulp API 什么是 gulp gulp 是一个前端构建工具&#xff0c;它能通过自动执行常见任务&#xff0c;比如编译预处理 CS…

去中心化的前端构建工具 — Vite

为什么要使用Vite 在浏览器中提供ES模块之前&#xff0c;开发人员没有以模块化方式编写JavaScript的本机机制。这就是为什么我们都很熟悉“捆绑”的概念:使用工具来抓取、处理和连接源模块到可以在浏览器中运行的文件中。 随着时间的推移&#xff0c;我们看到了webpack、Roll…

vite 前端构建工具

目录 一、vite 简介二、vite 语法纪要三、用 vite 创建项目1、用 vite 创建一个 react 项目2、用 vite 创建一个 vue3 项目 四、vite 和 webpack 的比较 一、vite 简介 Vite 官方中文文档 vite.config 配置文件 Vite 是一个 web 开发构建工具&#xff0c;由于其原生 ES 模块导入…

前端构建工具(理解+使用)

一、构建工具可以做什么&#xff1f; 安装 vs 做事情 1、安装包工具&#xff1a;例如&#xff1a;npm、Bower&#xff0c;Yeoman可以安装几乎所有的东西。 他们可以安装前端框架&#xff0c;比如Angular.js或者React.js。 他们可以为你的开发环境安装服务器。 他们可以安装…

前端构建工具的未来

本文作者系360奇舞团前端开发工程师 本文为翻译 原文标题&#xff1a;The Future Of Frontend Build Tools 原文作者&#xff1a;Alexander Joseph 原文链接&#xff1a;https://www.smashingmagazine.com/2022/06/future-frontend-build-tools/ 前端构建工具对现代前端开发者的…

对前端构建工具的一些理解

前言 最近有幸在前端团队里面做了一次关于 webpack 的技术分享。在分享的准备过程中&#xff0c;为了能让大家更好的理解 webpack&#xff0c;特意对市面上以前和现在流行的构建工具做了一个梳理总结。在整理和分享的过程中&#xff0c;获益匪浅&#xff0c;对前端构建工具有了…

前端构建工具大盘点:gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc

文章目录 背景分类转译器打包器 对比gulp VS webpackBundle vs Bundleless&#xff08;代表就是webpack VS vite&#xff09;其他比较 个人理解总结官网 背景 做前端也有好多年了&#xff0c;从最早的 jQuery 时代到现在的三大框架&#xff0c;这过程中用到了很多构建工具&…

前端程序员常用的9大构建工具

构建工具是一个把源代码生成可执行应用程序的过程自动化的程序(例如Android app生成apk)。构建包括编译、连接跟把代码打包成可用的或可执行的形式。 在小型项目中&#xff0c;开发者往往手动调用构建过程&#xff0c;这样在大型的项目中很不实用&#xff0c;在构建过程中难以跟…

Git入门指南二:初次运行Git前的配置

Git入门指南二:初次运行 Git 前的配置 初次运行 Git 前的配置 Git 提供了一个叫做 git config 的工具&#xff0c;专门用来配置或读取相应的工作环境变量&#xff0c;正是由这些环境变量&#xff0c;决定了 Git 在各个环节的具体工作方式和行为。 这些变量可以存放在以下三个…

Linux下使用Git入门

什么是版本控制 简单理解就是把文件每次的修改都记录下来&#xff0c;包括最初的一个版本。 在gitee上创建一个仓库 这样仓库就创建好了 gitclone 把仓库克隆到本地目录下 先选择一个目录来存放我们的仓库目录 然后把这个仓库的路径给复制上 在对应的目录下输入指令git …

Git入门级教程(轻松上手)

Git入门以及在Idea中集成使用Git 前言&#xff1a;当我们在团队开发的时候&#xff0c;我们需要一个工具来协同进行项目的完成&#xff0c;这个工具就是git。此博客内容是自己学习的笔记&#xff0c;我认为知道这些便可以轻松使用git了。 Git就是一种分布式版本控制系统 1.安装…

Git入门学习教程

Git学习 文章目录 Git学习1.简介2.工作流程图3.安装3.1 常用指令 4.环境配置4.1 查看配置4.2 配置用户名&#xff08;必须&#xff09;和邮箱 5.创建仓库6.基础操作指令6.1 查看状态&#xff08;status&#xff09;6.2 添加工作区到暂存区&#xff08;add&#xff09;6.3 提交暂…

【Git从入门到精通】Git入门

什么是版本控制 版本控制是一套系统&#xff0c;按时间记录某一个或一系列文件的变更&#xff0c;查看以前的特定版本。 使用版本控制系统&#xff0c;你可以将文件或者整个项目恢复到先前的状态&#xff0c;还可以对以前的文件进行对比。 本地版本控制系统 本地版本控制系…