Halfway through 2021, are you still happy?

This happened to me recently.

EMMM, the little brother of the product, agreed to add only 3 pages, but finally made the product add 6 pages, which almost made up seven dwarfs. The following UI draft looks like this (considering the interests of the company, this paper uses online cases as reference) :



(Resources from the network, Baidu cloud disk link:https://pan.baidu.com/s/1aaPwQevg1o5qThvT6SidDwExtract code: Z2W7)

Why should the worker embarrass the worker. In the face of these two rows of pages, for the CSS is relatively weak for me, it is a nightmare.

As I was fretting, I suddenly remembered the last time a colleague recommended a picture cutting artifact to meLooks like it’s working.

What exactly is this artifact?

The artifact is”CodeFun”, it claims.UI design draft intelligent source code generation, 10 minutes to complete 8 hours of work“, let’sDo the front end, do not move bricks.

Give it a try

Experience generating code with a click

As soon as I said it, I followed the three steps described on the official website to successfully convert the UI manuscript to Vue.js code. Let’s see the final effect:

From importing the file to exporting the code, it only took three minutes, which was pretty cool

Talk about how to use it

“CodeFun”The official website describes a quick start up process, just three steps from UI draft to project code generation. (You’re not bragging.)



First, I followed the instructions on the website and installed it.CodeFun”Plugin, and then prepare the Sketch Sketch (also supports Photoshop Sketch Sketch) :



Then start with three steps (skipping the plug-in installation process) :

After directly opening the Sketch file, at the top of the “Plugins” menu, select the “Upload Design” menu of “Codefun” :

Then log in to your account in the pop-up box and select “Project” and “Artboard” to create:

Then click “Upload”. After the completion of uploading, we can immediately see the imported project in the background, and each page is neatly placed. Let’s open a random page to have a look:

Familiar code, familiar HTML/CSS/JavaScript comes into view.

Then try exporting the project code, you can choose to export “WeChat applet” or “vue.js” project, and choose whether to export the RPX unit or the PX unit. It’s so sweet!

Talk about how you feel after a brief experience

Too sweet, we can choose to generate H5 or small program code according to the needs of the project, the restoration degree is very high, very in line with the characteristics of the official website introduction “accurate restoration of the design draft, the generation of code such as engineers handwriting”.

Of course, it is automatically generated, and there may be some imperficities (Codefun plus 🍗), but before the actual project deployment, we take the time to fine-tune the style, and then add our own business processing logic, and it is OK.

That saves me a lot of time cutting images!

Of course, here is just a brief introduction, you can experience (official website: https://code.fun), and then combined with the document, I believe you will be very harvest ~

What other powerful features does CodeFun have?

As I read through”CodeFun”Document, found that it actually has a lot of powerful functions.

1. Powerful List TAB component

The List tag component is used to loop through lists. The power of this component is that you can automatically recognize similar List contents as List tags and generate V-for-style code. So what we see is what we believe. Take this page comment list for an example:

After setting the content of the red box to List label, the generated code is as follows (you need to turn on “output List label as circular List”) :

<div class="flex-col list">
  <template v-for="(item, i) in listJWuhbbAm">
    <div class="list-item flex-col" :key="'item' + i">
      <div class="top-group flex-row">
        <img class="image_15" :src="item.avatar" />
        <div class="right-group flex-col">
          <span class="text_20">{{item.name}}</span>
          <span class="text_22">{{item.date}}</span>
        </div>
      </div>
      <span class="text_24">{{item.desc}}</span>
    </div>
  </template>
</div>

Its JS code is as follows (need to enable “data binding output mode”) :

export default { data() { return { "listJWuhbbAm": [{ "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016341787250137. PNG ", "name" : "XiaoXiaoXiao", "date" : "2019-02-26", "desc" : "Very good, clean and tidy, hygienic to the point, nice landlord, close to subway station, 5 star review, recommended!"}, {" Avatar ": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016342203168767. PNG ", "name" : "la la girl", "date" : "2019-02-16", "desc" : "Very good, clean and tidy, hygieneis done in place, the landlord is very good, very responsible, close to the subway station, convenient life, nearby many food street, large shopping mall, five-star review, recommended recommended oh, you don't want to go to the place..." "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e 0/16260016343523144906. PNG ", "name" : "don't tell you", "date" : "2019-02-16", "desc" : "The western sunset waving a gorgeous scarf, the evening wind blowing, a branch of setaria shaking a channel of evening lyrics. Rows of white cabins appeared, as delicate as a fairy tale, and as beautiful as a dream." }};

Just like our real business development, the List here shares CSS style code:

.list-item {
  padding: 27rpx 28rpx 28rpx;
  border-bottom: solid 2rpx rgb(245, 245, 245);
}

.list {
  margin-top: 15px;
}

Is it very sweet, it is very convenient to use ~👍

2. Good Grid Layout

In business development, the layout requirements of grid class such as “multi-column operation button” are often encountered, as shown in the red box below:

Considering the adaptation of screens of different sizes, special layout Settings are often needed. Grid layout is commonly used. In “CodeFun”, this kind of UI in the design draft is automatically generated into Grid layout code.

<div class="grid"> <div class="grid-item flex-col items-center"> <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c 108 e0/16260016485084464827 PNG "class =" image_7 "/ > < span class =" text_9 "> close < / span > < / div > < div class =" grid - item flex - col items-center"> <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c 108 e0/16260016485093876260 PNG "class =" image_7 "/ > < span class =" text_9 "> downtown < / span > < / div > < div class =" grid - item flex - col items-center"> <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c 108 e0/16260016485107042498 PNG "class =" image_7 "/ > < span class =" text_9 "> office < / span > < / div > < div class =" grid - item flex - col  items-center"> <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c 108 e0/16260016485084464827 PNG "class =" image_7 "/ > < span class =" text_9 "> suburban < / span > < / div > < div class =" grid - item flex - col items-center"> <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c 108 e0/16260016485093876260 PNG "class =" image_7 "/ > < span class =" text_9 "> apartment < / span > < / div > < div class =" grid - item flex - col items-center"> <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c 108 e0/16260016485107042498 PNG "class =" image_7 "/ > < span class =" text_9 "> urban villages < / span > < / div > < / div >

The style code is as follows:

.grid-item {
  padding: 9px 0;
}

.grid {
  margin: 9px 12px 0 11px;
  color: rgb(51, 51, 51);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  white-space: nowrap;
  height: 162px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

That’s great.

3. Flexible component types

When we need to set the header at the top or the footer at the bottom, we can simply set the component type to the header or footer tag:

4. Convenient routing jump setup

For front-end applications, it is often necessary to jump between different pages, and “Codefun” also supports setting page routing to jump:

Generate the following JS code:

export default { data() { return {}; }, methods: { view_21OnClick() { this.$router.push({ name: 'index' }); }}};

In the process of using “CodeFun”, these functions have been able to satisfy most of our cutting scenarios, and the saved cutting time allows us to spend more time on processing business logic. Cool 👍

Thoughts on Codefun

When we started using “CodeFun” in our project, we found ourselvesThe business development process has quietly changed, the following figure compares the two business R&D processes:

Obviously, the new R&D process with CodeFun is much more flexible and efficient

Experience summary

After playing CodeFun for a few days, here are some of my suggestions:

  1. Add support for front-end frameworks like React/Angular. (in order to take care of more users)
  2. The interaction of the “Data Binding” module is not intuitive enough to make it difficult for beginners to understand how to configure it. (I can make it a little bit more intuitive.)

I think the key value of CodeFun is that it helps front-end engineers a lot with its efficient identification featuresFree yourself from the hassle of page cutting. Through a lower learning cost, users can more simply and efficiently complete the requirements.

At present “CodeFun” products also in rapid iteration, recommend in use process, avoid using too complex UI draft, there might be generated effect of deviation (believe “CodeFun” engineers have been working hard to reduce the deviation), but it is also good, we can in the generated code, do some appropriate adjustment.

perfect~!

See here, is not very excited!

Click on the official website to experience it immediately

https://code.fun

Give the CodeFun engineers a “like” and a “love to see” and add 🍗