探寻本质-前端是做什么，平时都干嘛

跌倒的小黄瓜
149 阅读13分钟

前端开发是创建用户界面和交互体验的过程，它涉及到网站、移动应用、桌面应用等各种类型的软件产品。前端开发人员主要负责实现用户可见的部分，以及与后端系统的交互。

前端开发的主要工作包括：

  1. 网页设计与布局：使用 HTML、CSS 和 JavaScript 等语言，构建网页的结构、样式和交互效果。

  2. 用户交互：开发用户与界面之间的交互功能，例如按钮点击、表单提交、滑动滚动等。

  3. 数据可视化：使用图表、图形和其他可视化工具，展示数据和信息，以帮助用户更好地理解和分析。

  4. 前端框架和库的使用：利用流行的前端框架和库，如 Vue.js、React、Angular 等，提高开发效率和代码质量。

  5. 性能优化：确保前端应用在各种设备和网络环境下具有良好的性能，包括加载速度、响应性和流畅性。

  6. 跨浏览器和设备兼容性：使前端应用能够在不同的浏览器和操作系统上正常运行，解决兼容性问题。

  7. 与后端集成：与后端开发人员合作，通过 API 接口实现数据的传输和处理。

然而，前端的边界并不是固定不变的，随着技术的不断发展和创新，前端开发的领域也在不断扩展。例如，前端开发人员现在也可能涉及到移动端开发、桌面应用开发、跨平台开发、前端架构设计、用户体验优化等方面。

前端的本质是为用户提供直观、高效和令人愉悦的交互体验。我们需要不断学习和适应新的技术，前端果然卷，技术更新个不停，前一个还没学，下一个就出来了

关于边界

边界在哪里呢？边界的界定可能会因项目需求和技术趋势而有所不同，但前端开发始终围绕着用户体验和与后端系统的有效集成展开。前端什么时候能把后端的地位挤掉呢？（use server）

在系统开发中，前端开发的边界可以从以下几个方面来理解：

  1. 用户界面：前端开发主要负责创建用户与系统交互的界面。这包括网页的布局、样式、交互元素等，以提供直观和易用的用户体验。

  2. 数据展示和交互：前端开发负责将后端提供的数据以合适的方式展示给用户，并处理用户与界面的交互操作，如表单提交、按钮点击等。

  3. 前端逻辑和行为：前端开发可以包含一些与用户界面相关的逻辑和行为，例如数据验证、交互效果的实现等。

  4. 与后端的接口：前端开发需要与后端开发进行协作，通过定义和使用 API 接口来获取和发送数据，以实现前后端的通信和数据交换。

  5. 设备和浏览器兼容性：前端开发需要考虑不同设备和浏览器的兼容性，确保系统在各种环境下都能正常运行。

  6. 性能和用户体验：前端开发需要关注系统的性能优化，如加载速度、响应性等，以提供良好的用户体验。

然而，前端开发的边界并不是绝对的，可能会因项目的需求和技术架构而有所不同。在一些复杂的系统中，前端开发可能会与后端开发有更紧密的集成，或者涉及到前端框架和工具的选择和配置。比如BFF的出现，前端也可以有微服务来对接后端服务

前端开发在系统开发中的边界是与用户直接交互的部分，负责构建系统的可见界面和交互功能。与后端开发、设计团队和其他相关角色密切合作，共同打造一个完整且高效的系统。确定前端开发的具体边界应根据项目的特点和团队的分工来进行明确和调整。

工作都在做啥

常见的可以分为 开发浏览器中的交互和开发APP的交互， 两者使用的技术可能会有一些相似之处，但也存在一些差异。

在浏览器和 App 中，前端开发者的工作和使用的技术可能会有一些相似之处，但也存在一些差异。

浏览器中的前端开发者：

  • 网页设计与构建：使用 HTML、CSS 和 JavaScript 等技术创建网页的布局和样式，确保网页的外观和用户体验。

  • 交互功能实现：开发网页的交互功能，如表单验证、按钮点击事件处理等，使用 JavaScript 或前端框架（如 Vue.js、React 等）。

  • 浏览器兼容性：确保网页在不同浏览器和版本上的兼容性，解决可能出现的兼容性问题。

  • 性能优化：优化网页的加载速度和性能，减少页面加载时间，提高用户体验。

  • 数据交互：通过 AJAX 或 API 与后端服务器进行数据交互，实现动态数据的获取和展示。

  • 技术栈：常见的技术包括 HTML、CSS、JavaScript、前端框架、Web 开发工具等。

App 中的前端开发者：

  • 用户界面设计：设计和实现 App 的用户界面，考虑不同设备的屏幕尺寸和操作方式。

  • 视图与布局：使用特定的 UI 框架，来构建 App 的视图和布局。

  • 交互与动画：实现 App 中的交互效果和动画，提升用户体验。

  • 平台特定技术：了解并运用对应平台的开发技术和工具，如 RN，Flutter，H5

  • 性能优化：针对移动设备的特点，进行性能优化，如内存管理。

  • 与后端集成：通过网络请求与后端服务器进行数据通信，处理 API 接口。

  • 工具和语言：根据具体的 App 平台，可能使用 iOS 开发工具（Xcode）、Android 开发工具（Android Studio）、特定的编程语言， 一般就是JS/TS，或者一些自定义的DSL。

随着跨平台开发技术的发展，如 React Native 或 Flutter，前端开发者可以使用相同的技术栈来构建适用于多个平台的 App。此外，在一些混合或渐进式 Web App 中，前端开发者也可以利用 Web 技术来开发具有类似 App 体验的应用。

无论是在浏览器还是 App 中，前端开发者都致力于创建具有吸引力、功能性和良好用户体验的界面，并与后端开发人员协作，确保整个系统的无缝集成和高效运行。技术的选择会根据项目需求、团队偏好和目标平台而有所不同。

浏览器

在前端开发中，需要考虑兼容不同的浏览器，以下是一些常见的浏览器：

  1. Chrome：作为市场占有率较高的浏览器之一，Chrome 通常被认为是前端开发的首选浏览器。它具有良好的开发者工具和广泛的兼容性。

  2. Firefox：Firefox 也是一个流行的浏览器，具有强大的扩展生态系统和对 Web 标准的良好支持。

  3. Safari：在苹果设备上默认的浏览器，特别是在 iOS 平台上，需要确保在 Safari 上的兼容性。

  4. Edge：微软推出的新版 Edge 浏览器基于 Chromium 内核，与 Chrome 的兼容性较好，但仍需关注一些特定的差异。

  5. Internet Explorer：虽然已经逐渐被淘汰，但在一些企业环境中可能仍在使用，需要特别注意对旧版本 IE 的兼容。

  6. Opera：Opera 是一个小众但仍有一定用户群体的浏览器，也需要进行适当的兼容性测试。

  7. 移动端浏览器：除了桌面浏览器，还需要考虑在移动设备上的浏览器，如 Android 系统的 Chrome 和 WebView，以及 iOS 上的 Safari。

为了确保前端在不同浏览器上的兼容性，我们通常要采取以下措施：

  1. 遵循 Web 标准和最佳实践，确保代码的规范性和可移植性。

  2. 使用现代的前端框架和库，它们通常会处理一些常见的兼容性问题。

  3. 进行广泛的跨浏览器测试，包括在不同版本的主流浏览器上进行测试。

  4. 针对特定浏览器的差异，进行必要的调整和修复。

  5. 利用浏览器的特性检测和 polyfills（垫片）来提供缺失或不兼容的功能。

  6. 关注浏览器的更新和变化，及时调整代码以适应新的特性和兼容性要求。

通过综合考虑这些因素，可以提高前端在不同浏览器上的兼容性，提供一致的用户体验。但要完全覆盖所有可能的浏览器和版本是具有挑战性的，通常会根据目标用户群体和项目需求来确定重点支持的浏览器。

小程序

小程序是一种在移动端运行的轻量级应用程序，具有用户体验好、开发成本低、易于推广等特点。在前端领域，小程序开发也成为了一个重要的方向。

在小程序开发过程中，不同平台各有差异，但通常都需要注意以下几点：

  1. 平台规范和限制：不同的小程序平台可能有各自的规范和限制，开发者需要熟悉并遵守相应的开发指南。

  2. 用户体验：小程序的用户体验至关重要，要注重界面的简洁、易用性和响应速度。

  3. 数据安全：保护用户数据的安全，遵循相关的隐私政策和安全标准。

  4. 版本管理：合理管理小程序的版本更新，确保新版本的兼容性和稳定性。

  5. 审核流程：了解小程序的审核流程和要求，确保小程序能够顺利通过审核上线。

  6. 运营与推广：考虑小程序的运营和推广策略，提高小程序的用户知晓度和活跃度。

小程序开发为前端开发者提供了更多的机会和挑战，我们需要不断学习和适应不同平台的特点和变化，以提供高质量的小程序产品。

小程序在国内占据着各大主流APP，有许多主流的小程序厂商

以下列举几个国内一些主流的小程序厂商及其优缺点：

  • 字节跳动小程序：

    • 优点：拥有丰富的组件库和 API，支持丰富的开发场景，能够快速迭代，实现高效的开发流程，提供了完善的开发文档和社区支持，容易上手和解决问题。
    • 缺点：只支持在字节跳动内部运行，对于企业、组织等有一定的限制，与字节跳动生态绑定，开发者难以获得完全自主的控制权，在一些高度自定义的场景下，开发难度较大。

  • 支付宝小程序：

    • 优点：支持多种开发语言，如 JavaScript、TypeScript、Vue 等，开发模式类似于 Web 开发，开发者可以自由地使用 HTML、CSS 和 JavaScript 进行开发，支持支付宝内部和第三方应用的跳转，有更广泛的使用场景。
    • 缺点：对于小程序内部的组件和 API 相对较少，需要开发者自行开发或借助插件扩展。

  • 微信小程序：

    • 优点：微信用户量庞大，拥有广泛的用户基础。

    • 缺点：只支持在微信内部运行，对于企业、组织等有一定的限制，与微信生态绑定，开发者难以获得完全自主的控制权，在一些高度自定义的场景下，开发难度较大。

当然还有 百度小程序，京东小程序，小红书小程序，飞书小程序，钉钉小程序，当然还有快应用也和小程序类似

WebView

WebView 是一种在应用程序中嵌入网页内容的技术。它允许应用程序显示网页，使其能够集成网络功能。

为什么会有WebView呢？WebView 出现的原因主要有以下几点：

  1. 提供丰富的网络内容：通过 WebView，应用程序可以显示来自互联网的各种网页内容，如新闻、社交媒体、在线文档等。这使用户可以在应用程序中获取更广泛的信息和服务。

  2. 实现混合应用开发：WebView 使得开发人员能够将原生应用和网页内容结合起来。他们可以在应用程序中嵌入 WebView，以显示动态网页内容，并与原生功能进行交互。

  3. 跨平台开发：WebView 可以在不同的操作系统和平台上使用相同的网页内容，减少了为每个平台单独开发的工作量。这有助于提高开发效率和降低成本。

  4. 动态更新内容：由于 WebView 显示的是网页内容，开发人员可以通过更新服务器上的网页来轻松更新应用程序中的信息，而无需发布新的应用程序版本。

  5. 利用现有网页技术： WebView 允许开发人员利用已有的网页开发技术和工具，如 HTML、CSS 和 JavaScript，从而可以利用丰富的网页开发资源和社区。

WebView 的作用列举：

  1. 显示网页内容：在应用程序中嵌入 WebView，以显示外部网页，提供实时的信息和互动功能。

  2. 社交分享和登录：通过 WebView 实现社交媒体的分享功能，或者使用社交平台的登录验证。

  3. 在线文档和电子商务：在应用程序中展示在线文档、产品详情页面或进行在线购物。

  4. 广告和推广：利用 WebView 展示广告和推广内容，增加应用程序的收入来源。

WebView 为应用程序提供了一种灵活和便捷的方式来集成网络内容，丰富了用户体验，并为开发人员提供了更多的功能和可能性。然而，在使用 WebView 时，需要注意性能、安全和用户体验等方面的问题，以确保应用程序的质量和稳定性。

平时开发的H5都是运行在APP的WebView中的，与之对应的是浏览器页面，Webview的本质也是网页，和原生APP还是有差距的，但可以各种手段来优化，减少用户的差异感知

扫码_搜索联合传播样式-标准色版.png

avatar
文章
阅读
粉丝