最全的前端开发框架介绍

web前端开发

前端框架一般指用于简化网页设计的框架,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件(按钮,表单等等)。
前段框架的好处:对于互联网的产品而言,前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说,考虑的问题更为复杂,他们既要为网站上提供的产品和服务实现一流的Web页面、优化代码,保证体验的最佳,更要考虑与市面上各大浏览器的兼容性,还需顾及Web前端表现层和前后端交互的架构,以及模化、通用类库、框架编写等一系列问题,由此提升前端开发的效率,降低开发成本和周期。

JS框架

  • Vue.js
  • React.js
  • Svelte(轻量级框架,最近比较火)。
  • angular(逐渐淘汰)

对比:

  • vue :声明式编程,数据驱动的思想
  • React:函数式编程。如果你要改变数据,那么必须调用api去改。

在vue 中,几乎给你想要的全部给你了;而react 追求的更多的是自力更生。

CSS框架、组件库(B端常用)

知识库框架

  • Vuepress(基于 Vue.js,推荐)
  • Docusaurus(基于 React.js,推荐)
  • GitBook
  • docsify:可制作简易的 wiki 文档。案例:掘墓人的 Wiki

补充:知识库框架,首先推荐 Vuepress 和 Docusaurus,功能强大,成熟稳定。

API 文档框架

  • TypeDoc:将TypeScript项目生成 html、markdown等文档。
  • storybook:用于搭建UI组件的知识库。可在线预览UI组件的样式和交互效果。

跨端框架

  • Flutter(最近比较火):Flutter 的Dart开发语言,可以编译为 ARM 64、x86 和 JavaScript 代码
  • ReactNative(逐渐没落):App、Web端
  • Taro:小程序、H5

桌面应用开发框架

  • Electron 框架。案例:VS Code软件就是用 Electron 开发的。

Electron 非常流行,也被大量公司使用,也有很多成功软件,比如 VS Code、Facebook Messager、Twitch、Microsoft Teams 等。Electron 虽然上手容易,但问题也很明显,就是慢、吃内存和大,Electron 吃内存是因为打包的 Chromium 吃内容,同时一个 Hello World 编译后就要 120M+ 。

VS Code、chrome、小程序开发者工具,本质上都是运行的 chrome 内核。所以你会发现,这三个软件都很占内存,都很卡。我将其称之为“前端头痛三剑客”。

前端可视化框架、图表库

  • ECharts:百度的开源图表库。
  • D3.js:可视化 js 库。
  • Three.js:基于原生 WebGL 封装运行的三维引擎。太阳系案例 #
  • Cocos 引擎:游戏动画开发框架。
  • 白鹭引擎:H5游戏引擎,一套完整的H5游戏解决方案。白鹭引擎的所在公司已在2022年初破产,不建议使用。

编辑器框架

  • wangEditor:国内很流行
  • Tiptap:可定制性及极强;headerless,不提供任何 UI 样式,你完全可以自由地构建任何你想要的 UI。
  • TinyMCE:国外很火
  • ueditor:百度的开源框架。比较老,逐渐没落。
  • Monaco Editor:VS Code的在线版

Node.js 框架

  • Koa:新一代 Node.js 框架。
  • Egg.js:Egg是在Koa基础上进一步封装的企业级Web开发框架。
  • Express:比较老的Node.js 框架。

服务端渲染框架

  • Next.js (基于React.js)
  • Nuxt.js (基于Vue.js)

前端测试框架

  • Mocha:JS 测试框架。
  • Tiga:跨端(H5、小程序)项目的自动化测试 SDK。凹凸实验室出品。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/11348.html

(0)
江山如画的头像江山如画管理团队
上一篇 2023年1月18日 下午6:26
下一篇 2023年1月18日 下午6:37

99%的人还看了以下文章

  • 如何制作自己的网页

    要制作网页,建议你要具备的条件:对电脑熟练操作,使用电脑最好在一年以上,对网页设计感兴趣,有较充足的学习时间,熟悉office办公软件。当然,这些不是一定必须的。 第一阶段:开始时最好是学些网页编辑软件 如:Dreamweaver,hbuiler X,webstorm,Sublime Text 这样可以使您更了解网页制作与运营的原理。最好是结合教程边学习边制…

    2020年2月18日
    2.2K0
  • 网站前端开发常用工具大全-web设计师必备

    今天给大家分享的是网站前端开发常用工具及网址。 掌握了这些工具中的大部分,会让你的WEB前端设计工作事半功倍,您离一个优秀的前端设计师也就不远了~~ 原前端开发网(w3cfuns)开发,让前端开发变得更简单,exe文件只有1.67MB,点击直接运行,不需要安装,很方便。 功能:正则表达式、代码压缩、雪碧图制作、json格式化等,如果你经常在没有网络的办公环境…

    2019年2月21日
    4.6K0
  • 提高网页制作水平的7个要点

    1. 学好HTML和CSS编程 这是网页设计中最基础,也是最重要的部分。《web前端开发学习路线》 2. 清晰的导航 导航栏是页面中最重要的部分,因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏,可以提升网站的易用性,还可以减少用户在寻找自己需要的内容时遇到的麻烦。 3. 高质量的图片 高质量的图片,能大大提升网站的逼格。图片应当辅助你的设计来推销…

    2019年7月9日 网页设计
    3.2K0
  • 平面设计中最常用的一项设计技法-K先生案例精讲

    对比是在平面设计中最常用的一项设计技法,几乎每一个作品中都会出现“对比”的痕迹,今天中国网页设计给大家分享的是K先生平面设计中对比的8种运用技巧,包括大小、色彩、肌理、前后、疏密、虚实…等等,每个技巧运行都配有设计案例,一步步教你如何分析设计,讲解到位,通俗易懂,实用性强,一定会对你的设计有所帮助。

    2020年4月26日
    11.5K0
  • 个人如何制作网站、建立站点

    个人如何制作网站应该从以下几个方面展开: 1、确定网站的题材 网站题材就是网站的主题,你的网站是干什么的。如电影网站、小说网站等。 首先要明确,选择自己擅长和喜爱的题材,其次切忌题材太滥或者目标太高。 2、确定题材后,就要将收集到的资料内容作一个合理的编排 比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,…

    2019年11月16日
    9.7K0
  • 设计师如何构建自己的知识体系?

    最近几年能看到各行各业越来越多关于知识体系化的文章话题被关注,一定程度上说明在当前社会发展中,大家越来越重视个人知识体系化的积累。本篇文章将围绕知识体系为主题,会涉及到很多不同纬度的知识内容展开。 为什么要构建知识体系 第一,系统化知识,可以帮助我们更高效学习,节省学习中大量不必要的时间; 第二,学习吸收进来的知识点及时纳入体系里,可以让知识记得更加牢固; …

    2022年8月10日 网页设计
    3.2K0

发表回复

登录后才能评论