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

Blossom ·

更新时间:2024-09-21

· 829 次阅读

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

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

那么下面看下在套工具的能力：
我们先用React写个例子，看看react有多复杂：


Hello React!

    
    function Element(){
	  return Hello Baby!;
    }
    
    function App(props) {
        return (
            
            
        );
    }
    ReactDOM.render(
        ,
        document.getElementById('example')
    );

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



  Hello Baby!

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

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


Hello React!


function Element(){
      return Hello Baby!;
}

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {comps : [1]}
    }
    render() {
        const {comps } = this.state;
        return (
            
                {comps.map(comp => {
                    return 
                })}
            
        );
    }
}
ReactDOM.render(
    ,
    document.getElementById('example')
  );

看下uisys的实现：



  Hello Baby!


  

  function init(){
    var element = new Element();
    dom.appendChild(element);
  }

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



  Hello Baby!


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

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

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

其他如下：


		*{
			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;
		}
		AIroot Library Manager
		
			
				HOME
				ABOUT
				EDIT
				SERVICE

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

可以看下里面的代码段落：
1.


		body{
			margin:0px;
			background-color:#dddddd;
		}
	function init(){
	}


	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;
	}
	
		场景

airoot uisys 的可塑性非常强，对于插件的定义绝对三大框架后的大佬（我相信），来看下它为人民教育出版社开发的指数联动交互图书：

我们看下其中一页的代码：


  		Let's talk
    	Mr Jones,
this is Miss Green.
    	Good morning,
Miss Green.
    	Good morning.
		Draw and say
    	This is Miss Green.
    	This is Mr Jones.
  	14