ArtSuiteJS - for beautifully designed apps
We love beautifully designed apps. If you care about design as much as we do, you want a framework that not only provides exquisite default layouts and widgets for rapid prototyping, but also offers total, utter control down to the last pixel. We built ArtSuiteJS so you can bring your uncompromising vision to life as quickly as possible.
Why ArtSuiteJS? (aka Art Suite)
ArtSuiteJS is founded on three core goals:
- Uncompromising support for amazingly designed apps
- Modular, end-to-end platform for cloud-enabled web, mobile-web and native apps.
- Maximum developer productivity over the lifetime of the product
Uncompromising App Design
Great design is focused, beautiful, pleasurable to use, discoverable and minimal. Great design is more than skin deep. Ultimately, great design is about delivering maximum value across all aspects of the product.
We work from the following definition:
The objective measure of an app's design is the total perceived value divided by the total perceived effort delivered over every customer-hour spent with, or influenced by, the app, brand or related products and services.
Learn more about our philosophy on Amazingly Great Design.
Modular End-to-End Platform
ArtSuiteJS is designed to be modular. You can swap out packages at any level with 3rd party alternatives. You can use one package at the time, the whole platform or anything in between.
If you use the whole platform, though, you reap the benefits of deep integration at every level.
The Holy Grail: One App, Deployed Everywhere
Java was the first platform to attempt the holy grail of one app that runs everywhere. They failed. There is good reason why the following quote became so infamous:
Write once, debug everywhere. - William G. Wong | May 27, 2002
Most people gave up on the holy grail of app development believing it impossible. We, however have a different take. The reason why Java failed is because it wasn't a fully portable platform. In short, it used native widgets and other native integrations. That meant on every target platform, the "Java Platform" was actually a confusing mix of native and Java code creating endless possibilities for bugs unique to each platform.
In the modern era, ReactNative is making the exact same mistake. They use native widgets extensively. The result is every target platform has unique complications in the interaction between native UX and ReactNative's code. There is a benefit, if you can fix all the bugs, each app "feels native." This is a laudable goal.
We, however, believe it is even more important to be consistent across all platforms. Even Facebook, with all their hoards of developers, suffers from their primary app - Facebook.com - having inconsistent abilities and UI across their platforms. There are still, to this day (2019) things you can do on the web but not in the app - and visa versa.
Maximize Developer Productivity
We care not only about great design but also about getting product to market as quick as possible. Once the product is launched, we care about how easy it is to maintain, refactor or even dramatically pivot to a new product. We care about minimizing the time and effort it takes to deliver your uncompromising, though perhaps ever changing vision over the lifetime of your product.
Some of our core tenets for maximizing productivity:
- Convention-over-Configuration (even over code) - Where possible, be opinionated and establish a convention. This is the best solution since it can eliminate not only configuration files, but also whole swaths of unnecessary custom code.
- Essence over Artifact - We strive to implement the essential solution to each sub-problem.
- Write less code - At the end of the day, we obsesses about writing less code. Less code means less to write, less to refactor, less to read and less to maintain. We endlessly search for how to reduce the code needed to solve any particular problem. It's an endless, ratcheting process that has already born fruit in spades: projects in ArtSuiteJS + CaffeineScript are almost 5x smaller than projects written in Facebook React/JSX/Redux/HTML/CSS. Example: Tic-Tac-Toe
What is ArtSuiteJS?
- ArtEngine: rendering, layout and UI events
- ArtReact: components for building your application's interface
- ArtFlux: model-based client-side state management
- ArtEry: pipelines for all your remote data and service needs
The ArtEngine is an alternative to the HTML DOM. It uses a single HTMLCanvas element to render your entire user interface. The DOM and CSS are terribly designed for write apps. ArtEngine provides a modern, clean and elegant, designer-focused and extensible UI framework.
Modular: You don't have to use ArtEngine, swap it out and use the DOM instead. Everything else works. (WIP - we are close to supporting this, let us know if you are interested)
Modular: ArtReact can be swapped out for Facebook's React or any other client-side UX management package. (Not supported yet, but shouldn't be hard to do. Let us know if you are interested)
Object-oriented-design and functional-design are orthogonal technologies. OO is an oraganization tool, FP is a computational tool. Contrary to popular belief, they work extremely well together. - Shane Brinkman-Davis
ArtFlux uses a model-and-subscription method of managing state. Data subscriptions and mutations are direct and non-global, unlike other popular tools like redux. State updates are atomic and pure-functional, and there are no convoluted messaging systems with high degrees of brittle redundancies.
Modular: Redux and other tools have their own advantages. Swap out ArtFlux without worries. You can even use both if you want.
Last, ArtEry was inspired mostly by Parse.com, now at ParsePlatform.org. Unlike Parse, though, ArtEry is a fully generic, back-end agnostic tool. The powerful pipeline and filter system allows you to easily implement nearly any business logic and integrate with nearly any backend service with ease. Best of all, and perhaps our most radical innovation, you can develope it 100% within your browser and later deploy it to a server. You evolve your code from rapid prototyping smoothly to production code. This dramatically speeds up development since you can debug and test your entire stack within one runtime.
Modular: ArtEry is perhaps the most modular of all. It's just a tool for organizing, unifying and simplifying all your remote services. Use it where it makes sense, or don't use it all.
Integration: ArtEry and ArtFlux are tightly integrated if you use both. Define an ArtEry pipeline and get the associated ArtFlux model for free. One source file defines both. The result is your front end can subscribe to any data anywhere in the world with a single, declarative statement.
You can install the art-suite core with npm:
npm install art-suite
But the best way to get started is to use the
art-build-configurator to genereate a starting project. Learn more here: ArtBuildConfigurator.
- Launch Art Suite Demos (github source)
- ZoStream.com is a substantial, in-production next-generation multi-blogging platform from Imikimi
- ArtSuiteDemos is an extensive and growing collection of demos showing off every aspect of the ArtSuite's UI aspects: ArtEngine, ArtReact and ArtFlux.
- ArtSuiteTutorial is a multi-step tutorial showcasing how to build a working chat app, step by step.
The ArtSuite doc is primarily on Github in the READMEs and wikis of each package. The documentation is far from complete, so ask us questions and help us fill out the doc. You can also learn a lot by reading each package's tests. These tests are considered the definitive documentation, and, therefor, they are designed to be as readable as possible.
Go to the Wiki to start browsing the documentation.