A component of Zorro
Hiding Goods in the Shadow
Just install, import and write
by html:
or javascript:
First of all, around my work, there are lots of management system need to build on the web today, and many of them were developed on Bootstrap or Bootstrap-like UI framework just like SUI. And when first time I saw web components and Polymer. I suddenly felt this kind of work could be super simple and stupid. So I try to re-implement all the Bootstrap components and features on Polymer which name of the plan is called JIE. At the same time I put more and more ideas about data and interaction in it. It makes the components more friendly to form, data and interactions. Finally I gave it a better name: Zorro. That’s just how Zorro came out.
We hope Zorro could make us better and easier to support development of management-system-liked websites all around us first. And go through to feel the benefits of declarative programming, component-oriented html5 file structure and workflows which could give us more convenience and inspirations on web development in future.
For each component, it’s not only for the “common sence” of the dom structure + class name, but a simple and easy tag name. For example, a dialog component in Bootstrap is like below:
And the Zorro’s:
It hide all the repeatly-wrtten code to the shadow with a very simple tag: <z-dialog>
Also, it’s simple to be created by JavaScript anytime just with createElement
:
When we use Bootstrap, we often need to write more JavaScript manually. Because Bootstrap almost doesn’t consider how to bind data and handle data changes and user interactions. That’s really boring task for web developers everyday. We put Bootstrap styles, data and actions together as a whole completely component. And hide the logic between data, event and display internal.
Take pagination for example, in Bootstrap:
In fact you should have to use template engine or JavaScript to describe the pagination details.
or
And in Zorro:
That’s it! When user click each page item, the pagination will automatically changed current page and re-render itself, and also, fire a page-changed event with the new current page number as the value.
In re-implementing common elements. We felt more uncomfortable in forms. It make us paint sometimes. We conclude that user just do two things in forms:
So we ventured to change the forms:
<z-input-text type="text|password|textarea|...">
: open question for text, date or number<z-input-select flatten="auto|true|false" multi>
: closed question for a single/multiple selection, and the [flatten]
attribute is to described how options display: true
for input[type="radio"]
/input[type="checkbox"]
and false
for select > option
.We think that’s more directly target the purpose and easy to use.
<z-phone>
make you easy to check how a web page displayed in your phone<z-rmb>
is a mostly used and hard written manually component in my job… It save my workmates a lot of time.<z-progress>
‘s value could be bind to any JavaScript object which supports Progress Events.<z-dock>
makes webapp layout much easier.There are lots of ideas and improvements in Zorro waiting for you to discover them.
As the words above, Zorro development is based on Polymer. So you should have to add webcomponents polyfill in browsers which is not full-supported for web components. And currently, we just make sure Zorro works fine in webkit, maybe some mistakes and bugs in gecko / trident / spartan … in some kind of -moz-
-ms-
prefix issues. We believe that’s easy to fixed in the future.
Acturely, the performance of Zorro mostly depends on Polymer project. That’s not very well for production yet, espacially on the mobile. So does the compatibilities. In another way that’s why Zorro is focused on (internal) management system websites. Because most kind of these website are not extremely required about the rendering details but the functionality and structured component design. A good news is that the next version of Polymer will make better in compatibilities and performance. Zorro has chance to follow this plan.
Well. If you have read here, maybe you have been interested in Zorro. It you want to join us for contribution. Please contact any of our org members. Or:
<z-input>