最全的前端开发框架介绍

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%的人还看了以下文章

  • web前端开发学习路线

    如果你是新手,准备学习web前端开发的话,一定要想想为什么要学习它?性趣、爱好、获得一份相关工作…… 定位好自己,持之以恒,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后克服。在状态不好的情况下,要及时调整,多向大牛请教,那样往往能让自己成长的快,切勿急躁。 初学web前端开发可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会分析自…

    2018年1月18日
    3.8K0
  • 如何给节日主题、活动主题做设计

    产品的节日主题设计,已经成为各大门户争先出彩的亮点之一,无论是春节、元旦、七夕、圣诞等传统节日,还是双十一、双十二、阿里年货节和京东蝴蝶节等电商活动日,甚至还有各种国际节日都可以成为各大品牌的一个Show场。 近日,中国网页设计接到一项目需要做活动主题页面,在网上查了下相关教程不是很多,能讲深讲透的更少。后来看到JaylonG的文章,感觉很有启发,现分享给大…

    2018年3月12日 网页设计
    3.1K0
  • 这篇设计配色干货,0基础也能让你做出好作品

    配色一直是设计圈子里的热门话题,是我们作为设计师必须要掌握的一门重要技能,通过色彩可以向用户传递不同层面的视觉信息,所以不同的色彩也都被人们赋予了不同的含义。比如:红色、橙色、黄色等暖色系的颜色能表现出温暖、热闹;而蓝色、淡蓝色等冷色系颜色,会给人一种凉爽、寒冷的感觉。将色彩属性与设计作品有效地相互结合,往往能做到 1+1>2 的视觉效果。 色彩的特征…

    2020年2月18日 网页设计
    3.3K0
  • 网页制作实战项目九:飘城旅行社(分步教程2)

    网页制作实战项目九:飘城旅行社(分步教程)精 在上一课中,我们学习了实战项目九-首页的制作,今天来实现其他主要页面:旅游资讯。 练习一:PC端固定布局 地址:http://www.125jz.com/wp-content/demo/20190113demo1.html  练习二:流体移动布局 地址:马上上线 练习三:兼容响应式布局 地址:马上上线 1.导航下…

    2019年1月22日
    4.4K0
  • 网页制作实战项目五:根据网页效果图制作网页

    了解网页制作全过程,能够根据网页效果图PSD源文件,切图并制作出网页。

    2018年5月3日
    6.1K0
  • 福利!13款免费商用卡通字体推荐(已打包)

    本期推荐的是免费商用的卡通体,此类字体非常适合运用在可爱活泼、轻松休闲的设计中,会有不俗的表现力,常常能达到“画龙点睛”的效果。 部分作品展示: 整个字形向上倾斜,给人一种积极向上的感觉,而且横折和竖折的笔画都有弧线,没那么死板,无论是笔画结构,还是笔画粗细,都是灵活的,是一例轻松快乐风格的字体。 字形笔画去除了折笔的弧形,换之以平直的笔画,竖弯钩转为竖折,…

    2023年1月28日 网页设计
    1.6K0

发表回复

登录后才能评论