前端的入门记录

前言：机缘巧合，开始接触前端。之前有一点点修改的基础，但是对于前端整体不是很了解。
因为对css+html 有丢丢了解~

浅薄的理解，html是最后的显示的产物
javascript是做动态网页的
css是做静态网页的

前端目前框架梳理

目前了解到有三个前端的框架，vue、react、angular
知乎中对于三个框架的比较
如何了解这三个框架

一堆框架可以遵守某些协议或者规则就可以更方便的生成。
带我入门的

任务是做pipeline的界面

1.参考现有产品

目前主流的界面有blueocean，然后我就在想为啥有还要重新做？然后就在想可能像蓝鲸一样，想要一个集成的平台。
所以主要的修改架构和流程可以参考这两个产品。

2.划分大致功能模块

具体思考了一下pipeline构建的过程，主要分为一下几个模块。

可以根据这些模块来详细看一下这两个代码的构建流程。

enkins Blue Ocean的前端框架划分了多个功能模块和组件，以实现不同的用户界面和功能。以下是Blue Ocean插件中常见的一些功能模块和组件：

Pipeline Editor（流水线编辑器）：用于创建和编辑Jenkins流水线的可视化编辑器。它通常包含各种组件，如节点、阶段、步骤等，用于构建流水线的不同部分。

Pipeline Visualization（流水线可视化）：用于以图形方式显示流水线的执行过程和状态。它可以展示流水线的整体结构、当前执行的阶段和步骤，以及每个步骤的执行结果。

Pipeline Run History（流水线运行历史）：用于显示流水线的运行历史记录和详细信息。它通常以列表或时间轴的形式展示不同的流水线运行，并提供查看每个运行的详细信息和日志的功能。

Pipeline Activity（流水线活动）：用于展示流水线的活动情况，包括当前运行的流水线、已完成的流水线和其他相关信息。它可以提供过滤、排序和搜索功能，以便用户可以快速找到所需的流水线活动。

SCM Integration（源代码管理集成）：与源代码管理系统（如Git、SVN等）集成的组件，用于显示源代码的变更、分支信息以及与流水线的关联。

Authentication and Authorization（身份验证和授权）：用于管理用户身份验证和授权的组件。它通常包括用户登录、角色管理、权限设置等功能。

以上仅是Blue Ocean插件中的一些常见功能模块和组件示例，实际上，Blue Ocean的前端框架可能还包含其他功能模块和组件，以满足不同的用户需求和扩展性。具体的功能模块和组件结构可以通过查阅Blue Ocean插件的文档或源代码来了解。

3.blueocean

首先是blueocean，查了一下是基于react界面来做的，并且还在进行持续的优化，应该可以参考他的架构设计，和后续的优化思路。
blueocean源码，
jenkins-design-language
jenkins-design 文档
blueocean文档

用户手册

4.蓝鲸

然后是蓝鲸，查了一下就是基于vue做的，好像可以抄。所以对比着这两个产品看看实现的架构吧。
蓝鲸界面
蓝鲸源码