Syiro is a highly-focused framework for building front-end applications for devices ranging from mobile to desktop. Syiro utilizes HTML5, CSS3, and Typescript to easily manage front-end application components and is licensed under the Apache 2 licensing.
How does Syiro compare to the likes of Bootstrap and Polymer?
- Bootstrap implements components that are redundant given the capabilities of HTML5, such as progress bars, and as a result those frameworks are significantly more bloated and have to provide functionality to help trim out all the unnecessary components they package in.
- Bootstrap, unlike Syiro, also requires jQuery to do simple functionality like event handing, making the footprint for creating applications significantly larger as well as adding complexity in regards to dependencies.
- Polymer, just like Bootstrap, requires multiple dependencies and therefore makes rapid development more complex and forces you to rely on tools like Bower for dependency management.
- Polymer relies on Custom Elements, which is a working draft and is only supported in Chrome, which is neither friendly to the web ecosystem, nor to performance. Users of any browser not using the Blink engine can't utilize Custom Elements without polyfilling. Syiro, on the other hand, leverages the HTML5 standard data-* to define components.
- Neither Bootstrap nor Polymer offer an easy way to generate components via Javascript. With Syiro you can easily create a component by calling syiro.X.New (where X = the component type).
You mentioned that Syiro does not rely on jQuery, does that mean I can choose any other JavaScript framework to use with Syiro?
Absolutely. Since jQuery is not used in Syiro, you will not have to worry about dependency conflicts. All Syiro functionality is encapsulated in our Syiro module. You are free to use the likes of jQuery, Prototype, MooTools, etc.
How easy is it to modify the theming of Syiro to help my application differentiate?
Syiro uses LESS / CSS to theme components, making it easy to differentiate your application from the rest. We recommend you take a look at our theming guide.
What is Syiro's policy on backwards compatibility?
We have a document that highlights our policy on API support and backwards compatibility, so you know exactly when something could and when something shouldn't break.
You can download our stable 1.6.0 release which provides the necessary minified CSS, images and JS wrapped in a nice package.
You can also download our devel 1.7.0-rc2 release.
The package also comes with a gzipped version of the JavaScript code, so you can easily serve the compressed content.
| Framework | Minified CSS | Minified JS | Gzipped JS |
|---|---|---|---|
| Bootstrap 3.3.6 | 36.9kb | 122.5kb | None Provided |
| Polymer 1.3.1 | Varies depending on use of components | 155.3kb | None Provided |
| Syiro 1.6.0 | 31.7kb | 63.8kb | 14.4kb |
| Syiro 1.7.0-rc2 | 29.0kb | 56.2kb | 12.5kb |
| Syiro (DEV) | 31.8kb | 56.2kb | 12.5kb |
Details:
- Bootstrap's size is also calculating in jQuery
2.2.1, jQuery being a requirement of Bootstrap. - Polymer's minified calculation is based on using:
[CustomElement.min.js, HTMLImports.min.js, MutationObserver.min.js, ShadowDOM.min.js, webcomponents-lite.min.js]- All gzipped JavaScript was done using Google's Closure Compiler at "simple" optimizations level.
- Syiro numbers are updated for stable releases and dev (working branch).
This project leverages CodeUtils for development and adopts the CodeUtils Usage Spec. To learn how to contribute to this project and set up CodeUtils, read here.
You can learn how to use Syiro by following documentation at our Developer Center.
In this section, we show our plans for Syiro and when we intend on implementing particular features.