Unconventional but effective
Rapid-code patterns in React Apps for designers and product owners who want to contribute directly to the final product
Rapid-code is not no-code
Have you heard of low-code and no-code solutions like Bubble or Honeycode? The goal of no-code tools is to make apps without writing code. You can achieve that goal, but you end-up locked in their platform.
Rapid-code is different.
Imagine a combined flexibility of code with simplicity of Lego blocks powered by sophisticated productivity tools.
We call it rapid-code because it’s quick to learn and quick to change. It’s also the most inexpensive way to extend the capabilities of the solutions you build and test them with real users.
The focus of rapid-code frameworks will be to accelerate specific type of delivery with highly specialised development tools.
Show, don’t tell
We’ve made the first open-source rapid-code framework and called it Views, but we predict to see more rapid-code solutions launch in the future.
Check this post for more detailed forecast:
Views is helping professional product teams speed up the delivery of beautiful and functional applications.
You can think of Views as a configuration layer on the side of your React app, tightly integrated with it, and accessible to everyone on the product team, including designers and product owners.
Views is a dev dependency, which means that we don’t ship it to the browser or mobile phones. We always ship a React Web or Native app.
Also Views is not:
- Another templated design system or prototyping tool, like Framer.
- Another design system previewer, like StoryBook.
- Another website design tool, like Webflow.
- Another hand-off tool, like Zeplin.
In Views you write React code without writing Javascript!
How’s that possible? 🤖 Automation takes over the complexities and you can use intuitive patterns to control the layout, create state, edit content, create new design system components, and beautiful animated interactions.
Rapid-code conventions in Views
The goal of Views is to help deliver scalable enterprise and customer facing applications. With this goal in mind, we’ve simplified the conventional ways of writing HTML, CSS, and React, but kept the creative flexibility. No templates, right?! We follow the React’s reusable components convention and added few more abstractions to make the system as intuitive as possible for non-technical team members.
We’ve spent six years and close to a million dollars on the design and tests of the Views framework. The redesigned conventions help us achieve our delivery goals and make the workload bearable. The blocks, props, and the state give us a dependable base layer to build on top of. And there are still parts of the software development process that need rapid-code simplification, like data, business logic, DevOps, or versioning.
Building Blocks
Instead of:
118 HTML concepts you would need to learn to build interface in a conventional way
In Views rapid-code:
We use 14 types of blocks, that includes containers, inputs (captures), reusable React components, and content blocks
Properties a.k.a. Props
Instead of:
Hundreds of Classes, Pseudo-classes, and Ids that you would have to create in and app in addition to the HTML elements
In Views rapid-code:
We use reusable Views, which are React components, with embedded or dynamically set styles, conditions, and interactions
State and Flows
Instead of:
A mix of if/else statements, state setters, and routes that ambiguously represent parts of the UI
In Views rapid-code:
We use a simplified state machine that scales infinitely with the concepts of together and separate — the UI hierarchy is mapped to features and is represented within the layout
New Career Choices
Rapid-code can and will help you expand your career path from design or product management to engineering roles.
You will be able to control the copy, layout, state, and flow with styling and interaction props. That’s at least half of what a typical app is made of.
Rapid-code is the fastest way to become a Unicorn Designer (The most in demand and rarest of product team members — has excellent interaction design skills, visual design skills, and coding ability).
You don’t have to stop there though.
Since Views rapid-code layer is React, you can broaden your knowledge of the overall system and start writing Javascript when you feel ready. Learning on the job surpasses all other ways of up-skilling. Not to mention, that you get paid for it 🙃.
Tell me and I forget, teach me and I may remember, involve me and I learn.— Benjamin Franklin
DIY up-skilling
There are two ways you can discover what the rapid-code can do for you:
- Download Views Tools (free), go through the Foundations course as part of the the Tools, and use sample apps to learn from examples (also free). 🎉
- Signup to hands-on remote sessions (€135 per one hour session, up to you if it’s one-2-one or group session — split the cost?). Usually five sessions are enough to go through all patterns listed above, but the progress is up to you.
Here’re the points covered in the hands-on session:
- Building blocks — How to use Views, Containers, Content, and Captures?
- Props — How to use Styles, Conditions, and Interactions?
- Props Overrides —When to use static vs. dynamic props?
- State — How to control state with together, separate, and no/content patterns?
- Actions —How to set flow and create actionable buttons?
- Animations and Transitions — How to make your app look slick?
