Originally by Jeremy Keith

Translator: UC International research and development Jothy


Welcome to the “UC International Technology” public account, we will provide you with the client, server, algorithm, testing, data, front-end and other related high-quality technical articles, not limited to original and translation.

When we do front-end development at Clearleft, we usually provide production code in the form of component libraries. This means that our priorities are performance, accessibility, robustness, and other quality metrics for Web development.

But we always use the raw materials of front-end development — HTML, CSS and JavaScript — to produce things that are not suitable for production — I’m talking about prototyping.

There are a lot of code-free prototyping tools out there, and our designers often use them to communicate the nuances of interaction design. However, when we tested the prototype with real users, we found that it couldn’t match the flexibility of HTML, CSS, and JavaScript, which simply load it into a browser.

We do a lot of design sprints, and the number one thing is time. The prototype produced on the penultimate day of the sprint was certainly not production-quality, but it was good enough to pass the test.

What’s interesting — when prototyping — is that the front-end priorities we usually consider may end up being a thing of the past. Speed is the best thing right now, and if that means sacrificing semantics or performance, that’s fine, sacrifice. If I’m building a prototype thinking, “Now, what class do I give this component?” “Then I know MY way of thinking is wrong. This problem might work for actual production code, but it would be a waste of time for a prototype.

So these two jobs represent very different attitudes. For production work, quality is key. And prototyping, rapid production is the focus.

While I carefully consider the performance impact of third-party libraries and frameworks when developing public projects, I don’t think about it when prototyping. Feel free to give out all the JavaScript frameworks and CSS libraries you want (although I would argue that browser technologies like CSS Grid reduce the importance of CSS libraries like Bootstrap, even if only for prototyping).

Switching between production and prototype projects was fun, and a little confusing, as I had to flip a switch in my brain to change the soundtrack.

When a prototype works well and tests well, the real pitfall is to use the prototype code as the base code for the final product. Please don’t do this! I’ve made this mistake before, and it always ended badly. I ended up spending more time getting the prototype code aligned to production level than starting with a clean project.

Do: Make prototypes to test ideas, designs, interactions, and interfaces…… And then you throw the code away. The value of a prototype is in answering questions and testing hypotheses. When switching to production mode, don’t fall into the sunk cost fallacy.

Needless to say, don’t release prototypes into production under any circumstances!

But…

It seems that more and more online sites are adopting the concept of prototyping. People use heavyweight JavaScript frameworks regardless of whether they are appropriate or not. Accessibility, too, is relegated to an afterthought. Most sites have a fragile architecture — relying on first loading, then executing JavaScript, and then rendering basic content. The developer experience always takes precedence over the user experience.

Heydon recently highlighted an article offering this tip for aspiring Web developers:

There’s not much to learn about HTML right now, and you can always learn it, but before you start developing your first page, you need to understand the difference between inline elements (like span) and block-level elements (like div).

This is sound advice when you’re prototyping… However, if you are building sites for public consumption, be sure to keep the end user in mind.

英文原文 :

https://adactio.com/journal/14562



Good article recommendation:

Bootstrap has been released in v3.4? Is there a mistake?

Quicklink allows your pages to open in seconds



UC International Technology is committed to sharing high quality technical articles with you

Please follow our official account and share this article with your friends