Author: yu fruit | tencent social user experience design UI senior engineers, front, head of the team, UI development channels of the judges, tencent cloud invited the preacher, “Web stack all the engineer’s self-improvement” author.

Has been authorized by the author tencent cloud + community release, the original link: https://cloud.tencent.com/developer/article/1004498?fromSource=waitui

In the last article, we defined a “future” time frame and described how to learn “future-oriented.” To summarize, no real technology can be learned without practical scenarios. No amount of reading will teach you a new skill if you don’t do it.

In this article, we continue to talk about how to “develop across boundaries.”

I work in the Social user experience Design department of Tencent. During my six years of working experience, I have dealt with many designers as well as engineers. One of the things I learned was that design is not art, and engineering is not science.

Design is not art. In the words of literature and art, “art finds problems, design solves them”. That is, design for business. As the design department of a listed company, it needs to clearly show the product and build the desire of users. To some extent, it is necessary to hide the individual “art” and build a systematic experience for the user. The creation of the design, although also dependent on inspiration, is as a whole scientific and derivable.

Engineering is not equal to scientific research. Research needs to reach 100 percent on a technical point of specialization, even beyond the outermost layer of human knowledge, reaching 101 points. But in an engineering setting, it’s more important to invest the right skill points to achieve the current goal.

Therefore, when I wanted to create a product of my own, I naturally invested the right skill points in design, front end, back end, APP client, etc.

Again, I learned these skills not because I wanted to be a full-stack engineer, but because I wanted to make some products on my own. In the process, I continued to learn and unconsciously understood some of the inner workings of full-stack engineers.

I document all of this in my new book, Self-Cultivation for a Web Full Stack Engineer.

I have a hypothesis that “good front-end engineers are always good full stack engineers, and vice versa”.

There’s no data to prove it, so I have to be honest and admit that it’s just my own hypothesis.

Here’s how I did it.

First, if we all agree that the definition of a full-stack engineer is “someone who can make a product by himself” (as opposed to “someone who is skilled at everything”). Then, general Web products or App products will need the ability, generally divided into “technology”, “learning” and “product sense” three aspects.

Technology is the “engineering capabilities” needed to implement a product, including front-end and back-end languages, data structures and algorithms listed below, system design capabilities, databases, and mobile clients.

Learning shows the ability to keep learning and solve new problems. In addition to the technologies listed in the chart, there are also new technologies that continue to grow, so effective learning skills are essential.

Product sense includes an understanding of the user experience and the ability to continuously iterate on the product based on product data. Why is product sense important? There are some great apps on the App Store that have been independently developed by individual developers who have gone through the process from conception to design, from development to release. You can’t make the transition from “programmer” to “engineer” without a good product sense.

Front-end engineers have a natural advantage in learning and product sense.

This is because even the best universities in Korea do not have a front end major. Evan, the author of Vue.js, majored in art history while TJ studied design, not computer science. Finally entered the front end field, by love, hard work and learning ability. So I don’t think anyone can argue that front-end engineers are good learners.

In terms of product sense, because the front end often deals with user interface, we will think about what kind of user interface will attract users in our work. Users may use a variety of browsers and devices to access the site, so empathy is also needed to get a feel for what the user is actually visiting. Again, “Without practice scenarios, there will be no growth”, and the front end will have more practice scenarios in the “product feel”.

Of course, not all front ends have this idea, but there are many, many opportunities for dedicated front ends to improve their overall capabilities.

For front-end engineers, the most skilled is the front-end technology (HTML/CSS/JavaScript), and the prerequisite for skilled use of front-end technology is to have an understanding of the system.

System design refers to the use of software engineering method to construct a software system, which can solve the actual problems in real life. My feeling is that the HTTP protocol is often used in software systems to communicate between client and server, and even between servers. For front-end engineers who must master HTTP, there is often a general understanding.

When it comes to the back end, the language doesn’t really constitute a high technical barrier. On the server side, front-end engineers often work with back-end apis and simple templatable languages, if the data volume can be handled by a single server without a very large user base.

With the investment of time, the back-end language of the application layer can be used quickly. All you need is a chance to use the back-end language.

When learning a back-end language, my advice is to focus on the project and narrow down the list of skills you need.

That said, if you’re already proficient in JavaScript, start building the backend using Node instead of PHP or Java. Other than adding complexity, it doesn’t make much sense.

The human brain is not designed to handle complex projects. Humans moved from primitive villages to modern cities not because of genetic or physiological evolution, but because of a change in the way we work together (breaking down complex projects, everyone following a common interface, and only doing the broken work). So full stack engineers should also recognize their own brain limits when learning skills.

Of course, if the team has a requirement for a back-end language, it must follow the team’s existing technical capabilities.

In short, don’t learn more than one language at a time. It doesn’t make any sense except to add technical complexity.

Speaking of Node, recommend a website. It’s the latest revolutionary product from Software Fantasy author Joel, giving developers the fastest way to develop Node applications without having to buy servers and build development environments.

As shown in the following figure, add the new dependencies to your package.json dependencies and save them to the node_modules directory.

Also provides the library name completion function.

You can then use the library directly in your code, since it is already installed “locally” in the cloud.

Talk about mobile client development, specifically iOS and Android clients.

Client-side native development is similar to front-end development in that it essentially only renders data, generates user interfaces, and responds to user behavior. Since 2015, client development and front-end development have more and more similarities, such as the use of MVC architecture to separate the interface, logic and data, such as the React stack implementation.

When front-end engineers touch native client-side development, it definitely feels like “breaking new ground”! The device interface that used to rely on the client side can now be operated directly through the native interface. Graphic forms that crash after a few thousand lines can be buttery with native UITableView.

If you want to reuse existing skills, rather than learning a Native language from scratch, consider Hybrid or React-native.

There is no need to say much about Hybrid, which is essentially Web page rendering in a WebView. If you are familiar with mobile site development, you can get into Hybrid development directly. This approach has the advantage of being simple enough, but has the disadvantage of being slow to load and unable to render large amounts of data.

As for React-Native, although it uses JavaScript as the programming language like Hybrid, it has another solution. React redefines a programming approach to rendering interfaces, handling data, and handling interactions, and then renders them native across platforms. In this way, React claims to implement “Learn once, Write Everywhere.”

Because React-Native actually compiles to the Native interface, performance is generally better than Hybrid. React-native is offering more and more components, but be aware that some components perform better than others. Navigator and NavigatorIOS, for example, both offer in-app navigation, but NavigatorIOS is a Navigator that wraps iOS directly, so it’s better.

When selecting components, we need to make trade-offs between performance and ease of development. If performance is not critical, use Navigator. If performance is critical, use NavigatorIOS for iOS and another technology or Navigator for Android.

Algorithms and data structures are a big part of university computer science courses. ACM competitions also focus on algorithms and data structures, leading some students to believe that this is the most important part of software engineering.

In fact, “algorithms and data structures” can be thought of as the opposite skill tree to “system design.” Theory goes deep, asking how to solve a problem faster and better given the constraints of computing power. And the system is breadth, is to ask for a realistic demand in a multitude of technologies to design the most fast, good and economical technology combination.

Modern programming languages have a high degree of abstraction, and programmers don’t need to control the allocation and release of memory levels, just use high-level abstract data structures. JavaScript itself doesn’t have complex data structures, but using Prototype and closures you can simulate any data structure (including trees and linked lists), and even use third-party libraries (like underscore) as enhanced versions of JavaScript.

“Algorithm and data structure” should be the basic internal skills, no internal skills, only moves, can not become a master. Many self-taught front ends don’t understand algorithms and may write sites that render poorly.

So how do you improve algorithm and data structure capabilities? Recommend a website

Most topics now support JavaScript.

Let’s talk about databases.

The database is often the final bottleneck after the website develops to a certain scale.

This is not my personal opinion, but it is confirmed by numerous websites. When the number of users and feeds explodes, the first thing to fall is the database. So when we talk about Website Scale, maybe half the time we’re talking about database expansion.

MobgoDB is a document-oriented database, not a relational database. Document-oriented has several benefits:

1. Ease of use: Instead of rows, there are documents, which are more flexible and more in line with how developers of modern object-oriented languages view data. In addition, keys and values are no longer fixed types and sizes, so adding and removing fields is much easier and experimentation is easy.

2. Easy to scale: The size of databases is growing at an accelerating rate, consistent with Andy Beale’s law. Now that database growth has become inevitable, how to scale? From the technology is divided into vertical expansion (scale up) and horizontal expansion (scale out) two ideas. Vertical scaling refers to increasing the performance of a single computer, using more memory, faster cpus, and larger hard disks. However, vertical expansion will encounter cost performance evaluation after all, so the current large-scale Internet system adopts the idea of horizontal expansion, connecting multiple ordinary computers into clusters. Based on this, all you need to do to increase performance is add a normal machine to the cluster.

However, managing a cluster of 1,000 computers is obviously more difficult than managing one.

MobgoDB has a scale-out architecture that makes it easy to split data across multiple servers for document-oriented data types. MobgoDB automatically handles data and load across clusters, automatically reallocates documents, and directs user requests to the right machines. In this way, developers can concentrate on writing applications and not worry about extensions.

Andy – Bill takes away: Andy gives, Bill takes away Andy refers to Andy Grove, the former CEO of Intel, and Bill refers to Bill Gates, the former CEO of Microsoft.

3. Superior performance: One of the main goals of MobgoDB is to provide superior performance. In some designs, this goal is reflected. MobgoDB, for example, can perform dynamic padding on documents or pre-allocate files to take advantage of the extra space in exchange for stable performance. In summary, MongoDB is designed in many ways to maintain its high performance

As for horizontal expansion, Tencent Cloud’s cloud server supports flexible pricing, and users can be extended at any time when they reach a certain level. In addition, Tencent cloud also supports a variety of relational database, document database and database caching mechanism. Now, Tencent cloud has a special offer for students, as long as they upload their student ID card, they can get a domain name + server at a low price of 1 yuan. (Reference Address)

Well, that’s all for today’s sharing. Thank you.

There’s a separate page of links that you can take pictures of, in large type, and you can see them in the back. Maybe I’ll think of it in my photo album one day.

Welcome toTencent Cloud + communityOr pay attention to the wechat public account (QcloudCommunity), the first time to get more massive technical practice dry goods oh ~