前端技术框架与应用

心系
98 阅读11分钟

  1. 前端技术框架

  1. React（2013年5月、Meta）

优点：

TypeScript支持： 可以使用TypeScript进行开发，这使得它能够利用TypeScript的所有功能，包括接口、泛型和静态类型检查。

JSX： React使用了一个名为JSX的JavaScript扩展，这可能会让一些开发人员感到困惑。JSX没有必要使用React，但它可以使开发更快、更容易。

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}
const user = {
    firstName: 'Harper',
    lastName: 'Perez'
};
const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);
ReactDOM.render(
    element,
    document.getElementById('root')
);

使用 Virtual DOM： 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

社区支持： React拥有庞大的社区，这意味着您可以在Stack Overflow等网站上找到许多有关如何解决问题的答案。

缺点：

学习曲线： React的学习曲线可能会使初学者感到困惑，因为React是具有很多复杂特性的框架。

  1. Vue（2014年1月、尤雨溪）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初识</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div class="root">
    <h1>Hello {{name}}</h1>
</div>
<script type="text/javascript">
    new Vue({
        el:".root",
        data:{
            name:"world"
        }
    })
</script>
<style>
   .root {
       color: #333;
   }
</style>
</body>
</html>

优点：

TypeScript支持： 可以使用TypeScript进行开发，这使得它能够利用TypeScript的所有功能，包括接口、泛型和静态类型检查。

使用 Virtual DOM： 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

兼容性好： Vue支持客户端增强，因此如果你的应用只是简单地展示数据，那么Vue可能是最佳选择。

响应式系统： Vue的数据驱动使得你可以更容易地创建用户界面，因为当数据改变时，视图会同步更新。

易于学习： Vue的文档非常易于理解，并且有大量的教程和示例可供参考。

缺点：

组件重用性： Vue.js 的组件系统非常强大，但有时可能会使组件的重用性降低。这是因为 Vue.js 的组件系统是基于组件的，而不是基于功能的。这可能导致一些组件在某些情况下无法很好地重用。

  1. AngularJS（2010年12月）、Angular（2016年9月、Google）

优点：

TypeScript支持： Angular使用TypeScript进行开发，这使得它能够利用TypeScript的所有功能，包括接口、泛型和静态类型检查。

状态管理： Angular提供了一个内置的状态管理库，称为Angular Forms。这个库使得管理应用程序中的表单状态变得非常容易。

模板： Angular的模板语言非常强大，它允许您在组件中定义非常复杂的UI。

缺点：

学习曲线： Angular是一个相对较复杂的框架，需要花费一定的时间来学习和掌握。

性能： 与React和Vue等其他框架相比，Angular的性能可能不如它们快。

生态系统： 虽然Angular有一个庞大的社区，但它可能不如React和Vue的生态系统丰富。

  1. 核心概念MVVM（双向数据绑定Model–View–ViewModel）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>文本的输入绑定</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <input v-model="value" />
            {{value}}
        </div>
        <script>
        var vm = new Vue({
            el: "#app",
            data: {
                value: ""
            },
        })
    </script>
    </body>
</html>

优点：

低耦合： 视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变

可重用性： 可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑

独立开发： 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码

方便测试： 界面素来是比较难于测试的，测试可以针对ViewModel来写

缺点：

学习成本高： MVVM需要开发人员掌握多种技术和框架，因此学习成本较高

内存开销大： 大型的项目视图、状态较多，ViewModel 的构建和维护的成本都会⽐较⾼

  1. 前端技术的应用

  1. Web端（网页端）

  1. 单页Web应用（single page web application，SPA）

优点：

更快的 用户体验：因为页面只需要加载一次，之后的交互都是通过异步请求来完成。

更好的交互性：因为SPA可以使用JavaScript来实现更加复杂的交互效果。

更好的可维护性：因为所有的代码都在一个页面中，所以更容易进行调试和维护。

更好的可扩展性：因为SPA可以通过添加新的组件来扩展功能，而无需重新加载整个页面

缺点：

首次加载时间较长：因为需要加载所有的JavaScript和CSS文件。

对 SEO 不够友好：因为搜索引擎很难抓取动态生成的内容。

  1. 服务端渲染Web应用（Server-Side Render，SSR）

  1. Next.js（React）

  1. Nuxtjs（Vue）

优点：

更好的 SEO：由于搜索引擎爬虫可以直接看到完整的HTML文档，因此可以更好地识别和索引网站内容，提高网站的SEO效果。

更快的内容呈现：由于服务器可以在发送HTML之前渲染页面内容，因此用户可以更快地看到页面的内容，减少首次加载时间，提高用户体验。

更好的可访问性：由于页面内容在服务器端渲染，因此即使用户的浏览器不支持JavaScript或者JavaScript出现问题，用户仍然可以看到完整的页面内容

缺点：

更高的服务器负载：由于每个页面请求都需要在服务器上进行渲染，因此服务器负载会更高。

更慢的开发速度：由于需要考虑服务器端渲染和客户端渲染两种方式，因此开发速度可能会受到影响。

更复杂的部署：由于需要考虑服务器端渲染和客户端渲染两种方式，因此部署也会更加复杂

  1. App端

  1. 小程序、公众号（微信、支付宝、美团、抖音）

优点：

无需下载：用户可以直接在微信中打开小程序，无需下载和安装。

低门槛：小程序的开发门槛相对较低，可以使用HTML、CSS和JavaScript等Web技术进行开发。

跨平台性：小程序可以在iOS和Android等多个平台上运行。

更快的开发周期：小程序的开发周期相比Native App更短。

更低的开发成本：小程序的开发成本相比Native App更低。

缺点：

功能受限：小程序的功能相对有限，无法实现一些高级功能和复杂的交互效果。

性能问题：由于小程序需要在微信中运行，因此其性能可能受到微信版本和设备性能等因素的影响。

依赖于微信：小程序需要依赖微信平台，如果微信平台出现问题，可能会影响小程序的正常运行。

  1. Web App（H5）

Web App是一种基于Web技术的应用程序

优点：

跨平台性：Web App可以在多个平台上运行，例如桌面浏览器、移动浏览器和平板电脑等。

无需下载：用户可以直接在浏览器中打开Web App，无需下载和安装。

更低的开发成本：Web App的开发成本相比Native App更低。

更容易维护：Web App的维护相对简单，因为只需要维护一个代码库。

缺点包：

性能问题：Web App的性能通常不如Native App，因为它需要通过网络来获取数据和资源。

功能受限：Web App的功能相对有限，无法实现一些高级功能和复杂的交互效果。

依赖于网络：Web App需要依赖网络，如果网络连接不稳定或者速度较慢，可能会影响用户体验。

  1. Native App（原生App）

    1.   React Native(React2018)

    1.   uni-app(Vue)

    1.   Flutter(Google)

      Native App是一种基于特定平台的应用程序

      优点：

      性能优越： Native App可以直接访问设备的硬件和软件资源，因此其性能通常比其他应用程序更好。

      功能丰富： Native App可以实现各种高级功能和复杂的交互效果。

      更好的 用户体验 ： Native App可以提供更好的用户体验，因为它可以使用平台特定的UI元素和交互方式。

      更好的安全性： Native App通常比其他应用程序更安全，因为它可以使用平台提供的安全机制和API。

      缺点：

      开发成本高： Native App的开发成本相对较高，因为需要使用特定平台的编程语言和开发工具。

      维护成本高： Native App的维护成本相对较高，因为需要针对不同平台进行不同的维护。

      平台限制： Native App只能在特定平台上运行，例如iOS、Android和Windows Phone等。

  1. Hybrid App（混合App）

Hybrid App是一种结合了Web技术和Native技术的移动应用开发模式

优点：

  • 跨平台性：Hybrid App可以在多个平台上运行，例如iOS和Android等。
  • 更快的开发周期：Hybrid App可以重用Web技术的代码，因此开发周期相比Native App更短。
  • 更低的开发成本：Hybrid App的开发成本相比Native App更低。
  • 更容易维护：Hybrid App的维护相对简单，因为只需要维护一个代码库。

缺点：

  • 性能问题：Hybrid App的性能通常不如Native App，因为它需要通过WebView来运行Web技术的代码。
  • 依赖于第三方框架：Hybrid App通常需要使用第三方框架来实现Native和Web技术的交互，这可能会带来一些问题。
  • 可定制性受限：由于Hybrid App依赖于第三方框架，因此其可定制性可能受到限制。

  1. 桌面端

  1. Electron

Electron是一个开源的框架，可以使用Web技术（HTML、CSS、JavaScript）构建跨平台桌面应用程序。Electron最初是由GitHub开发的，用于构建GitHub Desktop应用程序。Electron基于Node.js和Chromium开发，支持Windows、macOS和Linux等多个平台。Electron提供了丰富的API和工具，可以轻松地将Web应用程序转换为桌面应用程序，而无需学习特定平台的编程语言和开发工具。

使用Electron开发的软件

  • Visual Studio Code：一款免费的源代码编辑器，支持多种编程语言和平台。
  • Atom：一款免费的开源文本编辑器，支持多种编程语言和平台。
  • GitHub Desktop：一款免费的Git桌面客户端，用于管理GitHub上的代码仓库。
  • Postman：一款免费的API测试工具，支持多种操作系统和设备。
  • 网易云音乐：gitee.com/wxzqs/elect…

优点：

跨平台性：Electron可以在多个平台上运行，例如Windows、macOS和Linux等。

开发效率高：Electron可以使用Web技术进行开发，因此开发效率相对较高。

开发成本低：Electron的开发成本相对较低，因为可以重用Web技术的代码。

易于维护：Electron的维护相对简单，因为只需要维护一个代码库。

支持丰富的第三方库和工具：Electron支持丰富的第三方库和工具，可以轻松地扩展应用程序的功能。

缺点：

性能问题：Electron应用程序通常比原生应用程序更占用系统资源，并且启动速度较慢。

文件大小较大：Electron应用程序的文件大小通常比原生应用程序更大。

安全性问题：由于Electron应用程序使用了Chromium内核，因此可能存在一些安全隐患。

  1. 服务端

  1. NodeJS

Node.js是一款开源的、跨平台的JavaScript运行时环境，基于Chrome V8引擎构建。Node.js可以在服务器端运行JavaScript代码，可以用于构建高性能、可扩展的网络应用程序。Node.js提供了丰富的API和工具，包括文件系统、网络、加密、数据库等，可以轻松地构建各种类型的应用程序。Node.js还支持模块化开发，可以使用npm（Node.js Package Manager）来安装和管理各种开源模块和工具。Node.js的应用范围非常广泛，包括Web应用程序、命令行工具、桌面应用程序等

基于NodeJS的框架：

  • Express：是Node.js最流行的Web应用程序框架之一，提供了丰富的功能和插件，可以轻松构建RESTful API和Web应用程序。
  • Koa：是一个轻量级的Web应用程序框架，由Express的原作者编写，使用了ES6的语法，提供了更好的中间件处理方式。

  1. 总结

前端三剑客（Html、Css、JavaScript）是前端的基础，前端框架是一种工具或库，旨在帮助前端开发人员更高效地构建和开发网页。通过提供预定义的组件、模板和功能，前端框架可以大幅减少开发时间并提高开发质量，至于在项目中如何选择前端框架，还需要根据项目实际的需求情况，自行考虑、决策。技术没有绝对的好与坏，根据业务选择合适的技术。

avatar
文章
阅读
粉丝