This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Sergi Bosch
Posted Aug 02 - Read on Facebook

Hi smart people, I'm looking for help making my framer.js code modular. As you can see in this simple prototype (that includes the Input-Framer module by @ajimix), a lot of my code is repetitive. I'd love to hear people's suggestions on how to remove it's redundancies. Thanks! Here's the prototype:

2 Comments

Niels van Hoorn

There are three levels of abstraction you could apply:

Create the layers in a for-loop:
for i in [0...3]
__new InputModule.Input
____setup: true
____placeholderColor: "#9B9B9B"
____y: i*100

Create a function to create a layer:
createInputLayer = (y)->
__new InputModule.Input
____setup: true
____placeholderColor: "#9B9B9B"
____y: y

createInputLayer(188)
createInputLayer(300)
createInputLayer(400)

Extend the InputModule.Input to provide defaults:
class MyInput extends InputModule.Input
__constructor: (options) ->
____super _.defaults options,
______setup: true
______placeholderColor: "#9B9B9B"

new MyInput
__y: 188
new MyInput
__y: 300
new MyInput
__y: 400

Which one suits your problem best is up to you, it also depends on how many things of your layer need to be flexible.

Sergi Bosch

thanks so much! That's exactly the kind of advice I was looking for. I will experiment with the constructor methodology first.

Read the entire post on Facebook