关于WEB前端开发

Posted 2021-04-08 HTMLPAGE

那么，到底什么是WEB前端开发呢？

从字面上理解，WEB前端开发的工作与网站的某些“前端”息息相关，可以认为这个“前端”是整个网站的最前端，是最接近用户的地方。那所谓的网站“前端”又包括哪些部分呢？

大家都知道，打开网站后首先展现在用户面前的是整个网站的视图部分，包括布局、样式、动画、多媒体元素等，而当用户开始浏览页面点击鼠标或者输入内容时，页面会针对用户的行为做出对应的反馈（例如显示/隐藏、内容变化等页面交互），这些综合起来就是网站的“前端”部分了。

上面我们提到的网站那些“前端”部分的东西，大多都在用户使用的浏览器端执行，所以WEB前端开发也称之为客户端/浏览器端开发。WEB前端主要开发语言为html，CSS和javascript。随着技术变革，衍生出了一系列新的框架和解决方案，使得WEB前端开发逐渐丰富起来。

早些年，WEB前端开发的工作几乎被“美工”承包了，在很多人的印象中，WEB前端开发仍然停留在“切图仔”时代，认为调调样式切一切图就可以放学回家了。然而并不是，从2007年到现在，经过大概11年的发展，前端开发变得越来越规范，很多后端开发的模式及思想已经渗透到了WEB前端开发，PWA模式（Progressive Web App）也让前端的疆域也从页面扩展到各种APP，包括跨平台桌面运用。WEB前端开发的工作已不仅仅是简单写写样式切切图了，加之WEB前端与用户体验息息相关，前端开发变得越来越重要。

随着时代变迁，越来越多的移动设备拥有了互联网访问能力，各种各样的平台、屏幕和分辨率，这就需要我们在开发之前进行更好的规划，网站的前端能适时自动适应这些平台设备，在开发成本与用户体验之间寻求一个合适的契合点。响应式布局应运而生，与传统多平台开发相比，在获得较好的用户体验同时节省了大量的人力物力，所有设备一套代码，后期维护也变得容易。

HTML, CSS, & JAVASCRIPT:

WEB前端开发者使用Web技术（即HTML，CSS，DOM和JavaScript）构建和开发网站或WEB应用程序前端，通常需要在各种Web平台环境（包括浏览器）上运行或一些非Web平台环境使用（例如React Native），不仅仅是WEB浏览器端那么单一。

我们通过学习开发HTML，CSS和JavaScript进入WEB前端开发领域，而这些HTML，CSS和JavaScript可以在Web浏览器中运行，也可以在其它环境下运行，例如无头浏览器、WebView或一些Native环境中运行。 下面介绍一下这四个运行场景：

WEB 浏览器(WEB BROWSERS)

Web浏览器是用于检索、呈现互联网上的信息的软件。 一般在台式机或笔记本电脑，平板电脑或手机上可以看到它的身影，但近年来，越来越多的智能设备也包含了WEB浏览器，例如智能电视、汽车甚至是冰箱。WEB浏览器是一种比较常见的访问网站的工具。

常见的Web浏览器（按照最常用的顺序显示）：

• Chrome

• Safari

• Internet Explorer

• Firefox

• Edge

无头浏览器（HEADLESS BROWSERS）

无头浏览器是指没有用户图形界面的浏览器，可以通过编程方式从命令行界面控制的网页浏览器，通常用于网页自动化（例如，功能测试，抓取，单元测试等）。可以理解为，无头浏览器就是一种通过命令行运行的可以检索和遍历网页的浏览器。

最常见的无头浏览器是：

• Headless Chromium

• Zombie

• slimerjs

WEBVIEWS

Webviews通常被包含在原生的系统或应用程序中，用来运行web页面。可以理解为，Webviews就像iframe或者是Web浏览器里面的一个选项卡，被嵌入在原生系统或应用程序的设备中运行（例如，ios，android，windows）。

Webview最常见的几种解决方案：

• Cordova

• NW.js

• Electron

注：htmlpage.cn项目中的网页构建器桌面版就是用Electron包的。

NATIVE FROM WEB TECH

最后，WEB前端开发者可以使用从前端开发中学到的知识来为其它跨平台及非浏览器设备开发应用程序。 例如，创建Native应用程序（native applications）。

示例：

• Flutter

• React Native

介绍完这些，你应该对WEB前端开发有大概的了解了吧？