使用开源技术快速上手 Web 前端开发(内含PPT课件)

news2024/11/16 7:52:13

11月29日 OpenTiny 参与了华为云开源针对的高校学生在中国人民大学举办的 meetup 交流活动,本次活动演讲主要围绕数据库、Web3、AI大模型、微服务治理、前端等领域展开讨论。OpenTiny 主要为大家分享了 《使用开源技术快速上手Web前端开发》 ,与大家共同探讨前端开发经验。

图片

本次分享主要分为三个环节展开:

  • Web前端开发与核心技术简介
  • 实践:使用开源上手前端开发
  • 开源软件使用注意事项 & 参与开源

OpenTiny主要内容

首先通过“什么是 Web 前端”引入前端的概念,介绍了 Web 前端随着互联网技术和移动互联网的发展,开发难度逐步提升。

图片

图片

接着与大家讨论了为什么要学前端,明确了前端使用的场景以及学前端能够为搭建的服务和软件提供人机交互界面,从而追求更好的体验,吸引更多的用户。

图片

然后向大家科普了前端开发的核心技术,以及前端领域当前一些细分的方向

图片

其中包含前端相关的一些技术栈,解释了随着开发项目复杂度的增长,前端工程化的必要性。介绍了前端工程和对应的软件工程方法思想及过程。

图片

当然也介绍了前端当前的一些比较知名的框架、库和技能点,由此引出前端开发学习的方法,强调了关注行业趋势,在实践中开发学习以及夯实基础知识的重要性,最后引出要构建属于自己的知识图谱,并分享了一些资源地址。

资源链接:https://www.bootcss.com/

图片

图片

在此过程中也提到了使用开源库的原因和好处,列举了当前一些优秀的前端开源库。

图片

随后也与大家共同探讨了,在学习资料多的情况下如何着手前端开发,此时可以从构建一个简单的应用入手,继而把自己的想法运用热门技术栈变成应用。

图片

接下来通过实战演示了如何快速上手 Vue3 应用的开发,使用了 TinyVue 组件库演示了如何引用库,如何查看 API 选用合适的组件,以及如何根据 API 修改内容。

图片

除此之外还介绍了国内当前比较优秀的低代码平台,以及开源的低代码引擎,结合 TinyEngine 开源项目演示低代码快速搭建和代码生成。还扩展结合当前热门的 AI 辅助开发,演示了 Bing 搜索的 Chat 聊天功能能够通过文字需求生成使用 TinyVue 组件库的代码。

图片

同时也介绍了开源软件使用注意事项,重点说明几个方向,选择开发友好的开源库,对库的使用量/热度等进行评估,强调了许可证的重要性。

图片

最后也鼓励大家在使用开源软件的过程多多参与开源,学会开源平台的友好协作开发,从开源贡献中提高自身水平,并阐述了一些开源迷思鼓励同学们参与到开源中去。

图片

关于 OpenTiny

图片

OpenTiny 是一套企业级 Web 前端开发解决方案,提供跨端、跨框架、跨版本的 TinyVue 组件库,包含基于 Angular+TypeScript 的 TinyNG 组件库,拥有灵活扩展的低代码引擎 TinyEngine,具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具,可帮助开发者高效开发 Web 应用。


欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~更多视频内容也可关注B站、抖音、小红书、视频号

OpenTiny 也在持续招募贡献者,欢迎一起共建

OpenTiny 官网:https://opentiny.design/

OpenTiny 代码仓库:https://github.com/opentiny/

TinyVue 源码:https://github.com/opentiny/tiny-vue

TinyEngine 源码: https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1309966.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AMEYA360 | 太阳诱电汽车电子解决方案

据AMEYA360了解,日前,太阳诱电汽车电子产品相关内容在电子发烧友网站以专题页形式更新。主要内容包含太阳诱电车规级电子元器件产品优势、汽车电子领域应用场景、产品阵容等。 太阳诱电车规级电子元器件以丰富多样的产品阵容助力汽车电子化和智能化。 太…

致远互联-OA wpsAssistServlet 任意文件读取漏洞复现

0x01 产品简介 致远互联-OA 是数字化构建企业数字化协同运营中台,面向企业各种业务场景提供一站式大数据分析解决方案的协同办公软件。 0x02 漏洞概述 致远互联-OA wpsAssistServlet 存在任意文件读取漏洞,攻击者可读取系统密码等敏感信息进一步控制系统。 0x03 复现环境…

第二证券:防御性板块逆势活跃 A股结构性机会轮动

昨日商场慎重张望心境升温,个股跌多涨少。防御性板块中的医药、燃气板块涨幅居前。医药板块中,拓新药业、森萱医药涨超19%,百利天恒、亨迪药业、新赣江等多股涨超10%。 据中国气候网消息,从12月12日夜间初步,新一轮寒…

自定义Axure元件库及原型图泳道图的绘制(详细不同类的案例)

目录 前言 一.自定义元件库 1.1 自定义元件库的作用 1.2 自定义元件的操作 二.流程图 2.1 流程图的作用 2.2 绘制流程图 2.3 简易流程图案例 三.泳道图 3.1 泳道图的作用 3.2 流程图和泳道图的区别 3.3 绘制泳道图 四.绘制前的准备 五.案例 4.1 门诊模块案例 4.2 …

Java面向对象(高级)-- 包装类(wrapper)的使用

文章目录 一、概念(1)为什么需要包装类(2) 有哪些包装类(3)总结 二、包装类(1)自定义包装类(2) 包装类与基本数据类型间的转换2.1 为什么需要转换2.2 装箱2.2…

wvp-GB28181-pro 2.0+ZLMediaKit 使用Dockerfile制作镜像以及部署【CentOS7】

说明 部署gb28181和zlm主要需要构建两个镜像,第一个为基础镜像,以centos7为基础构建新的基础镜像base.Dockerfile,第二个镜像为服务部署镜像server.Dockerfile,以第一个镜像base.Dockerfile构建出的镜像为基础镜像进行构建 整个基础镜像的构…

防火墙无非就这8种类型,小白完全不用怕!

你们好,我的网工朋友。 当我们谈到网络开放性带来的安全挑战时,都会想起黑客、病毒、恶意软件等等。 而正是因为这些威胁,让网络安全变成了网络世界里的重要议题,如果说起怎么保护网络安全,基本上我们都会第一时间想…

Java8新特性:函数式(Functional)接口

我是南城余!阿里云开发者平台专家博士证书获得者! 欢迎关注我的博客!一同成长! 一名从事运维开发的worker,记录分享学习。 专注于AI,运维开发,windows Linux 系统领域的分享! 本…

Spark环境搭建和使用方法

目录 一、安装Spark (一)基础环境 (二)安装Python3版本 (三)下载安装Spark (四)配置相关文件 二、在pyspark中运行代码 (一)pyspark命令 &#xff08…

HTTP 403错误:禁止访问,如何解除

“HTTP 403错误,禁止访问!”这句话是不是听起来就像是在告诉你:“嘿,你没有权限进这个房间!”没错,这就是你尝试访问某个网站或资源时可能会遇到的问题。别急,这里有一份秘籍,教你如…

Cobalt Strike四种提权方法

简介 Cobalt Strike是一款基于java的渗透测试神器,常被业界人称为CS神器。自3.0以后已经不在使用Metasploit框架而作为一个独立的平台使用,分为客户端与服务端,服务端是一个,客户端可以有多个,非常适合团队协同作战&a…

剧本杀小程序成为创业者新选择,剧本杀小程序开发

剧本杀作为现下年轻人最喜欢的新兴行业,发展前景非常乐观,即使剧本杀目前处于创新发展阶段,但剧本杀行业依然在快速发展中。 根据业内数据,预计2025年剧本杀市场规模能达到四百多亿元。市场规模的扩大自然也吸引来了不少的创业者…

最前端|Locofy试用报告:设计稿直接转换为代码

目录 一、调研目的 二、调研报告设计 三、调研报告 (一)操作步骤 (二)结果初见 (三)初步结论 四、总结 五、补充 一、调研目的 初步调研的目标: locofy 的 实操流程locofy 涉及到的相关工作角色及其…

TOUGH系列软件实践技术应用

TOUGH系列软件是由美国劳伦斯伯克利实验室开发的,旨在解决非饱和带中地下水、热运移的通用模拟软件。和传统地下水模拟软件Feflow和Modflow不同,TOUGH系列软件采用模块化设计和有限积分差网格剖分方法,通过配合不同状态方程(EOS模…

el-tree搜索的使用

2023.12.11今天我学习了如何对el-tree进行搜索的功能,效果如下: 代码如下: 重点部分:给el-tree设置ref,通过监听roleName的变化过滤数据。 default-expand-all可以设置默认展开全部子节点。 check可以拿到当前节点的…

程序员必读:Python 中如何完美处理日志记录?

日志记录在软件开发中扮演着至关重要的角色。它不仅可以帮助开发人员跟踪应用程序的状态和行为,还能提供有价值的诊断信息。Python 提供了内置的 logging 模块,为开发者提供了一个强大且灵活的日志记录工具。 日志的重要性 在软件开发中,对…

数字孪生的开发平台

数字孪生在国内得到了越来越多的关注,一些公司和平台提供了数字孪生的开发服务。以下是一些国内数字孪生的开发平台或服务提供商,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作。 1.华为数字…

低功耗全极霍尔开关国产芯片D02,适用于手机或笔记本电脑等产品中,数字输出 2.4V~5.5V的电池供电

D02 是一款低功耗全极霍尔开关,用于检测施加的磁通量密度,并提供一个数字输出,该输出指示所感测磁通量幅度的当前状态。这些应用的一个例子是翻盖手机中的 ON/OFF 开关。 微功耗设计特别适合电池供电系统,如手机或笔记本电脑&…

短视频自媒体创作者都在用的去水印小程序

如今可以发短视频的平台越来越多,我们经常看到喜欢的视频想下载下来,或者当做手机壁纸,由于直接下载下来视频都会带有平台的水印,让我们用着看起来非常不美观,所以我们就要想办法去掉这个水印,下载没有水印…

HarmonyOS4.0从零开始的开发教程15HTTP数据请求

HarmonyOS(十三)HTTP数据请求 1 概述 日常生活中我们使用应用程序看新闻、发送消息等,都需要连接到互联网,从服务端获取数据。例如,新闻应用可以从新闻服务器中获取最新的热点新闻,从而给用户打造更加丰富…