Web 新平台 “airoot-uisys” 释放前端开发活力

简介: A powerful web ui tool, so we call it uisys! 一个功能强大的 WEB UI 开发工具,所以我们叫它UISYS。

写这篇文章比较尴尬,因为当今开发WEB的平台主要是nodejs,代表性的框架就是网络三大框架。很多人都了解也都熟悉,他们的优势之一就是模块化开发,适合大项目的构架,另外就是数据绑定的思想。我开发WEB大概很长时间了,之前前身做flash,后来做flex,用过extjs、j-ui,当然web三大框架都用过,说实话对于开发来讲还是限制性比较大。
由衷的感觉早起开发WEB像拿着画笔,现在开发WEB像拿着印刷机。虽然web开发当今蓬勃发展,丹内在确实siqichenc死气沉沉,没有创意和灵感。

因此,我重新开发了一套工具,这套工具给程序员更自由的发挥空间,并且无论开发者在什么水平,都可以轻易实现模块化的思想。在这套工具里,及时你会最简单的html开发,也不影响你循序渐进的使用。

那么下面看下在套工具的能力:
我们用React写个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
    <!-- 定义一个模块 -->
    function Element(){
      return <h1>Hello Baby!</h1>;
    }

    <!-- 你要展现的代码写在下面. -->
    function App(props) {
        return (
            <div>
               <Element/>
               <Element/>
            </div>
        );
    }

    ReactDOM.render(
        <App />,
        document.getElementById('example')
    );
</script>

</body>
</html>

看下 airoot-uisys 工具下的写法(其中@pub 表示可以单页渲染)。

<@pub/>

<!-- 定义一个模块 -->
<@define name="Element">
  <h1>Hello Baby!</h1>
</@define>

<!-- 你要展现的代码写在下面. -->
<div>
  <Element/>
  <Element/>
</div>  

如果要运行上面的代码,可以看下这个博客:
https://cloud.tencent.com/developer/article/1611252

你也可通过javascript 创建自定义的component
看下React的实现:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
<!-- 定义一个模块 -->
function Element(){
      return <h1>Hello Baby!</h1>;
}
<!-- 定义一个模块 -->
class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {comps : [1]}
    }
    
    render() {
        const {comps } = this.state;
        return (
            <div>
                {comps.map(comp => {
                    return <Element/>
                })}
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.getElementById('example')
  );
</script>

</body>
</html>

看下uisys的实现:

<@pub/>

<!-- 定义一个模块 -->
<@define name="Element">
  <h1>Hello Baby!</h1>
</@define>

<!-- 你要展现的代码写在下面. -->
<div>
  <!-- dom 内部区域-->
</div>

<script>
  function init(){
    var element = new Element();
    dom.appendChild(element);
  }
</script>

上面的代码如果不了解dom关键字,你也可以这么写:

<@pub/>

<!-- 定义一个模块 -->
<@define name="Element">
  <div>Hello Baby!</div>
</@define>

<!-- 你要展现的代码写在下面. -->
<div id="ct"></div>

<script>
  function init(){
      var element= new Element();
      #ct.appendChild(element);
  }
</script>

uisys 的灵活性非常好,上面的代码你可以分成两个文件,一个放Element.ui ,一个放App.ui。这里就不多演示了。

airoot uisys 现在发布了v1版本,基于它的能力可以创建很多复杂的web应用。
例如可以用HTML渲染Three.js 的功能,如下效果图:
image

其他如下:

<!-- 
    类注释
    @author sunxy
    @version 0.0
 -->
<@import value="jus.*" />
<@import value="zs.*" />
<@import value="zs.texture.*" />
<desktop>
    <style>
        *{
            transition:all .3s ease;
        }
        #header{
            background-color:#f0f0f0;
        }
        
        #header ul{
            margin-top:20px;
            margin-right:20px;
        }
        
        #header li{
            float:left;
            list-style:none;
            margin-right:10px;
        }
    </style>
    <hbox id="header" width="100%" height="60">
        <div width="400" height="100%" style="font-family:Microsoft YaHei;font-size:32px;font-weight:bold;margin:10px 0px 0px 15px;">AIroot Library Manager</div>
        <div width="100%" height="100%">
            <ul style="float:right;">
                <li>HOME</li>
                <li>ABOUT</li>
                <li>EDIT</li>
                <li>SERVICE</li>
            </ul>
        </div>
    </hbox>
    <position width="100%" height="100%">
        <td id="plt" width="100%" height="100%">
            <SkyBox>
                <children>
                    <Sphere x="0" y="0" z="0" r="3" w="26" h="24" color="#ffaa00" />
                    <Sphere x="10" y="0" z="0" r="3" w="26" h="24" color="#00ffaa"/>
                    <Sphere x="0" y="10" z="0" r="3" w="26" h="24" color="#ff00aa"/>
                    <Sphere x="0" y="0" z="10" r="3" w="26" h="24" color="#00ff00"/>
                    <Sphere x="-10" y="0" z="0" r="3" w="26" h="24" />
                    <Sphere x="0" y="-10" z="0" r="3" w="26" h="24" />
                    <Sphere x="0" y="0" z="-10" r="3" w="26" h="24">
                        <texture>
                            <TextureLoader src="textures/crate.gif" />
                        </texture>
                    </Sphere>
                    <Cube x="20" y="5" width="10" height="10" depth="10">
                        <texture>
                            <TextureLoader src="textures/crate.gif" />
                        </texture>
                    </Cube>
                    <Loader src="" />
                </children>
            </SkyBox>
            <fog />
        </td>
        <LeftLabel />
        <RightLabel right="25" top="10" />
    </position>
</desktop>

目前我正在用airoot uisys重新做一个flash,为什么选择uisys呢,因为uisys在语言写法上不会给你阻碍,思想到代码很直接,可以看下uisys做成flash IDE的效果,一下全部由uisys开发的web flash ide:
image
可以看下里面的代码段落:
1.

<!-- PlayEditor.ui -->
<@pub/>
<head>
    <style>
        body{
            margin:0px;
            background-color:#dddddd;
        }
    </style>
</head>
<@import value="jus.*"/>
<desktop>
    <plat.TimeLine id="tl" height="230" />
    <HBox>
        <plat.Library width="320" height="100%"></Library>
        <plat.Scene width="100%" height="100%"></Scene>
    </HBox>
</desktop>
<script>
    function init(){
        
    }
</script>

2.

<!-- Scene.ui -->
<@import value="jus.*"/>
<style>
    body{
        border-right:1px solid #aaaaaa;
    }
    .header{
        
        display:flex;
        align-items:center;
        padding:0px 10px;
        background-color:#d0d0d0;
        
    }
    
    .frame{
        background-color: #dddddd;
        box-shadow:0px 0px 4px rgba(0,0,0,0.2);
        position:relative;
    }
    .bg{
        background-color:#fefefe;
    }
</style>
<VBox height="100%">
    <div height="48" width="100%" class="header">
        场景&nbsp;&nbsp;
        <Combo>
            
        </Combo>
    </div>
    <Position width="100%" height="100%" class="frame">
        <Index left="100" top="50" right="100" bottom="50"/>
    </Position>
</VBox>

airoot uisys 的可塑性非常强,对于插件的定义绝对三大框架后的大佬(我相信),来看下它为人民教育出版社开发的指数联动交互图书:
image
我们看下其中一页的代码:

<!-- 
    类注释
    @author sunxy
    @version 0.0
 -->
<@import value="component.*" />
<@import value="root.*" />
<page>
    <image x="35" y="62" src="img/photo87.png" />
      <image x="117" y="655" src="img/photo85.png" />
      <blacktext x="126" y="66" audio="audio/page014/OtherData/231_014_01.mp3">Let's talk</blacktext>
       <etext x='54' y='238' audio="audio/page014/OtherData/231_014_02.mp3">Mr Jones,<br/>this is Miss Green.</etext>
       <etext x='356' y='252' audio="audio/page014/OtherData/231_014_03.mp3">Good morning,<br/>Miss Green.</etext>
       <etext x='304' y='497' audio="audio/page014/OtherData/231_014_04.mp3">Good morning.</etext>
    <blacktext x="71" y="594" audio="audio/page014/OtherData/231_014_06.mp3"><img src="img/photo88.png" />Draw and say</blacktext>
       <etext x='148' y='670' audio="audio/page014/OtherData/231_014_07.mp3">This is Miss Green.</etext>
       <etext x='382' y='670' audio="audio/page014/OtherData/231_014_08.mp3">This is Mr Jones.</etext>
      <lnum>14</lnum>
</page>

上面的代码在uisys的编写框架下可以实现点击朗读,和通篇朗读,当然还可以支持游戏。

airoot uisys 先介绍这么多。

目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
179 3
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
3月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
3月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
3月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
3月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
98 3
|
3月前
|
Unix Linux PHP
PHP在Web开发中的平台独立性优势###
本文探讨了PHP的跨平台特性,阐述其作为服务器端脚本语言如何在不同操作系统上无缝运行,以及这一特性为开发者和组织带来的便利性和成本效益。 ###
|
3月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
61 3
|
3月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
104 2

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    342
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55