👋. Let's learn what this whole Views thing is all about together!
I'll be honest with you, we made Views for us 😜. The amount of time we spent handing designs off and waiting for them to be real was ridiculous so we figured we may as well do something about it.
So, yeah, Views means that designers, as well as developers, code.
Coding helps you understand how the platform you're building for works.
Developers are happy coding. However, whether designers should code or not, is a topic that's kind of hot nowadays in the industry with all sort of points of view on it. We think that they should, but maybe not in the way we know code today.
Whether you pick HTML and CSS, React, Vue, Angular, Ember, Web Components, Svelte, or whatever other take at writing your app, there's a lot to learn for a newcomer. Designers in particular with all the other things they have to do while building a product, don't have tonnes of time to spare. They have to use it wisely.
We think that the code we write should be beautiful, meaningful, and simple.
Views sets us is free from unnecessary punctuation and indentation, letting us focus on what matters the most: how we describe our application.
When you look at the code you can even think about it as a properties panel in Sketch or Illustrator if you like.
Here's a post showing how we got to the syntax we have today. And this is Tom's reaction when he first saw it live 👻.
Views are made out of blocks.
A Hello World example in Views may look like:
Text
text Hello World
A block is defined by its type, eg, Block and configured by its properties,
which we'll call props from now on because it's shorter 😬. In the example, the
prop key we're using is called text and it has a value of Hello world.
In Views we use a special notation for the prop keys called camel case, which is
a fancy way of saying that if you have a prop key reading background-color,
when camel cased, it should be backgroundColor. 🐫.
In Views we distinguish three types of blocks: Containers, Content and Custom blocks.
Container blocks let you group blocks together. They are:
VerticalHorizontalList
Vertical and Horizontal let you lay blocks out. Vertical will stack any
blocks inside of it one below the other and Horizontal will get them side by
side.
Views uses a thing call Flexible Box, or flexbox, to layout your blocks in the UI. It's a layout mode intended to accommodate different screen sizes and different display devices without much effort. Tom wrote a great post a while back explaining our approach at a simplified flexbox, check it out here. If you're curious about ou can read more about flexbox here.
In CSS terms, Vertical is a shortcut for flex-direction: row
If you've been doing Web development for a while, you might be wondering why we chose it over the default block mode of that CSS has. The main reasons are that it's more predictable, meaning it's easier to use for newcomers than display block, and also that it works across platforms thanks to Facebook's Yoga layout engine.
By the way, that doesn't mean that you can't use other display values. See
the quirks for a few cases in which we've spotted flex wasn't
cutting it for us.
List lets you repeat one item many times.
It needs one prop, called
You'd generally want to do this with different data
Content blocks let you, well, show stuff. You met one before, Text, let's
meet all of them:
CaptureImageSvgText
Text is probably the block you'll use the most. Its most important prop is,
wait for it... are you ready?!? 👉 text. 😱. Yeah, I know, you saw that one
coming... Sure.
A Text block can take almost any CSS, more importantly it takes font styles,
like fontFamily, fontSize, fontWeight, lineHeight, letterSpacing,
etc. And colours. Oh yeah, deepskyblue and deeppink. Now we're talking.
For the Irish, British and Australians in the world, remember that the prop is
color and not colour. 🤐.
We all know everyone loves web fonts. You can use those here too. Yeah, Google
fonts, Typekit, even that piece of art you have sitting in that custom woff file
in your computer would work. However, if you're using web fonts, please please
please, use fontWeight too. You see, we're doing some smart stuff there to
ease font loading and you're better off being specific so we don't have to load
stuff unnecessarily and make your app slower. Remember that the more fonts you
use, the more it will take for your app to load, so use them with caution. 🤓.
Sorry for the unsolicited lecture 🙄, here's an example of how to use it:
Text
fontFamily Roboto, sans-serif
fontWeight 300
text nananana nananana nananana Batmannnn!!!!!!! 🍀
Image takes a source prop, it can be a URL or a local file. TODO
Capture TODO
CaptureEmail
CaptureFile
CaptureInput
CaptureNumber
CapturePhone
CaptureSecure
CaptureText
SVGs are amazing. They let you do amazing graphics that scale like crazy.
Of course you can use an Image block to just show an SVG file as an image
but if you want to do more crazy stuff with them, like animating parts of it
or changing how it looks like on the fly, you're better off using an Svg
block. Inside it, you can use a these specific blocks:
CircleEllipseGLinearGradientRadialGradientLinePathPolygonPolylineRectSymbolSvgTextUseDefsStop
While you can make an Svg by hand, like:
Svg
viewBox 0 0 20 20
width 20
height 20
Circle
cx 10
cy 10
r 5
stroke deepskyblue
It's certainly more fun that have that done automatically for you 😇. You can
run views-morph file.svg and 💥! You'll get a ready to go Views Svg!
Here's a little video on how you can use it in your project today.
TODO onClick toggle props.stuff
TODO
TODO ✨
TODO
TODO 💾
TODO
yarn add views-morph
views-morph src --watch --as react-dom
yarn add views-morph
views-morph . --watch --as react-native
yarn add views-morph
views-morph . --watch --as react-dom
You will want to add this to your .gitignore file:
# views
**/*.data.js
**/*.view.js
**/*.view.css
**/*.view.tests.js
We’ve created the following packages to help you understand .view files better:
We currently highlight block names, margins, paddings, code, and property values. Our highlighters aren’t perfect, but they should get us started. Feel free to submit fixes and suggestions!
If you’re using other editors and come up with a syntax highlighter for it, reach out, and we’ll add it to this list.
Happy editing!
Install the dependencies with:
yarn
Run it:
yarn start
It should automatically open the browser for you.
All the code is in the src folder.
To build the project, use:
yarn run build
It will create a build folder with the app ready to be deployed.