Published on <a href="http://ift.tt/2sl1s6j">| Prototyping: From UX to Front End &mdash; Medium</a> Andrew Liebchen 
FramerJS is an amazing tool for building prototypes of all kinds: from experimental wireframes to high fidelity micro-interaction mockups. Framer’s genius is that it’s just Javascript in the end, so it compiles down to something that can run natively in a browser. At the same time, it has a secondary effect of helping designers learn how to be better at writing code.
<img alt="" src="http://ift.tt/2r1Ltq2">
In an effort (I think) that was meant to lower the barrier to entry, <a href="http://koenbok.com/">Koen Bok</a> (who founded <a href="http://madebysofa.com/">Sofa</a> and invented Framer at Facebook) implemented the Framer in <a href="http://ift.tt/jEIcxH">Coffeescript</a> and made it the syntax of Framer Studio, the all-in-one design tool for Framer. Coffeescript compiles directly to Javascript, but has a simpler, cleaner syntax with whitespace formatting. It’s easier to write than JS, looks great, and is pretty easy to read.
For instance, if you want to write a ternary operator in plain old JS:
<pre>var pet = isCat ? ‘Garfield’ : ‘Odie’;</pre>
In Coffeescript, it might be a few more characters, but it’s far more readable:
<pre>pet = if isCat then 'Garfield' else 'Odie'</pre>
This statement will compile down to (roughly) the same as above. Most importantly, Coffeescript keeps you from making mistakes and implements so future JS features that didn’t exist when Coffeescript was released, like <a href="http://ift.tt/1qcr1te">arrow functions</a> and <a href="http://ift.tt/1XXdYij">template literals</a>:
<pre>locatePet = (name) =&gt; if name is 'Nermal' alert "#{name} is in Abu Dhabi</pre>
Okay, you get it. Coffeescript is great…well, most of the time. Sometimes it makes me a little nutty. The whitespace formatting, having to convert StackOverflow answers to Coffeescript (😂), get a little old after awhile.
Then there’s <a href="https://framer.com/">Framer Studio</a>.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FElJOsCzm05U%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DElJOsCzm05U&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FElJOsCzm05U%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2r1zE2P">http://ift.tt/2r1zE2P</a></iframe>
When I started using Framer Studio a few months ago, it felt perfect. I enabled quick Sketch importing and syncing, a minimal coding environment with some helpful typeahead syntax search, and a simple integrated preview window. I was hooked.
The recent update however, is something else. I love the ambition of the design tab: combining Sketch-style primitive creation and editing with Framer’s already powerful prototyping experience. Even though I “draw” a fair amount with Framer code, the design tab is a step too far for me.
And it’s a little buggy. And the code editor is really basic. And it’s hard to manager your code when your prototypes get large. Those things aside, it’s great 😉
At the it’s core, Framer is just a Javascript library of classes, modules, and sugars that help you build amazing prototypes. There is even a stand-alone version of the <a href="http://ift.tt/VFfQiH">library</a> that you can use to create prototypes outside of Studio, with or without Coffeescript.
Since Framer was first released, the JS community has made huge advances. We now have amazing build tools like <a href="http://ift.tt/1EpWuFj">Webpack</a>. We can transpile code writing in future versions of JS that are currently unsupported in browsers with the help of <a href="https://babeljs.io/">Babel</a>. We have access to an ever growing library of open source modules thanks to <a href="https://www.npmjs.com/">npm</a>. Yet, the Framer core library is stuck in a time before all these things were commonplace.
What to do? Well, add all these things to the Framer core library and open it up to modern Javascript development, and <a href="http://ift.tt/2sl1qLJ">ECMA-Framer</a> was born. Webpack provides builds and spins up a dev server, allowing you to preview your prototype in your browser. Babel transpiles ES6 and 7 Javascript into ES5. Best of all, you can use your own code editor.
Writing Framer code in regular old JS feels really good, especially if you have experience working with React. In general, the code is a little more “verbose,” but its not too bad:
<pre># Coffeescript layerA = new Layer backgroundColor: new Color '333' opacity: 0.5</pre>
<pre>// Javascript let layerA = new Layer({ backgroundColor: new Color('333'), opacity: 0.5, });</pre>
The benefit here is that you’re writing plain old Javascript. It’s easier to see how these elements are understood by the language, without having to do the Coffeescript compilation in your mind. As you get into more complicated programming problems in your Framer prototypes, StackOverflow is suddenly more expressive…all the solutions look like your prototype’s syntax!
My favorite thing about <a href="http://ift.tt/2sl1qLJ">ECMA-Framer</a> is the ability to spread prototype code across multiple files via ES6’s import feature.
<pre>// button.js export default button = new TextLayer({ backgroundColor: 'blue', ..., });</pre>
<pre>// app.js import button from './button';</pre>
Boom. You can spread out as much of your prototype as you want in modules contained by as many files as you choose. I create a lot of complex desktop prototypes in Framer, and I find this is a great organizational feature. Much better than Framer Studio’s “code folding.”
There’s a lot more to love about <a href="http://ift.tt/2sl1qLJ">ECMA-Framer</a>, so you should try it out yourself. Just follow the instructions on the repo, and if you’re at least vaguely comfortable in your terminal, you’ll be coding in no time.
<a href="http://ift.tt/2sl1qLJ">Give it a try</a> and let me know what you think!
<img src="http://ift.tt/2r26Ibh" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2skHF74">FramerJS without the Coffeescript</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

FramerJS without the Coffeescript

Top Stories