One year for a small company, let's take a look at what the front-end of a small company can do. One year's front-end

One year for a small company, let's take a look at what the front-end of a small company can do. One year's front-end
Preface

Yesterday, I took a day off to test subject 3. As a result, the first frame was hung on the light which was not completely closed, and the second frame was hung on the front of the car when turning, when I heard the teacher say "Go down", I felt sad and red-faced. This made me very depressed and didn't want to go back to work at night. I still felt a little depressed when I went home, in this case, it seems that you cannot properly adjust your mood without writing some chicken soup. Let's take a look at the end of the year and write a summary for this year.

Think back to your own car learning experience. In fact, it is very serious. Once you have time to study, the exercises are also normal, and you will meditate on the entire examination process at night, but at last, I still made a mistake. At this time, I had a clear conscience, or I had worked hard. Although I failed, I should be respected.

Now, my friends who talk about this kind of things are not just comforting themselves. I did work very hard and really seriously in the process of doing so, but at last I could not produce any results and I could not do anything, all these efforts are meaningless. To map this license to an important project development:

Product requirements-> R & D efforts to work overtime-> test efforts to work overtime-> launch-> high-traffic failures ......

During the development process, R & D engineers work overtime every day and tests work overtime every day. However, after the project is launched, the previous efforts will not be rewarded, the coming may be the boss's anger and the team's turmoil. I am lucky enough to be able to experience it, whether it's an exam or a project. Let's look back and think about what we should do in our life. It's also good to have a deep feeling of powerlessness. I feel a little relieved when I think of it, it's just a try again (self-comforting )......

Recall that at the beginning of 16, I returned to Chengdu and started a pleasant "slow pace" Life. I did not think that the current platform provided by the company is not available in other places. In terms of work intensity and business complexity, it is quite appetizing, occasionally, the work intensity is even higher than that in Shanghai. Well, this is very "Chengdu ".

Personal opinion in this article.

Large or small companies

In the past, some people often wrote articles about whether to go to a small company or a large company and think about the experiences of a few years. In fact, a large company or a small company is not important. A good team is important!

A large company generally has everything. You only need to have a learning heart and learn a lot of nutrients. A small company also has a huge advantage, there is nothing. As long as you have the heart, you can share the things of a large company. This kind of practice provides more valuable knowledge and skills than learning!

When I first arrived at the company, I found a phenomenon:

① Many of my friends did not buy a house, but they all had their own cars.

② Most of our friends go home after work

I can clearly feel a slow pace here. There is nothing wrong with it. Life and Work should be separated, but it makes me feel crisis and worry, the biggest concern is that most of our friends may not care about the company's wealth. In fact, life is very fair, and everyone has almost the same opportunity, if there is a lot of wealth there, it depends on whether you want to get it.

During the previous interview, someone asked me how to obtain the knowledge, maybe because I am relatively low. I have always believed in one principle:

I have heard of <demo <actual work used <actual work has been pitted many times or summarized in Depth

The accumulation of the wind is not thick, and its negative wings are also powerless. There are a lot of in-depth good articles on the Internet. If there is no foundation, it makes no sense to read them. I will only sigh in my heart that I am a good guy.

Most of the knowledge I have learned comes directly from the project. At this time, you need to have a good team. I am very glad that I have stayed at Ctrip wireless, ctrip wireless is far away from front-end engineering, hybrid, and public service. At that time, I was very studious. I had nothing to do with it, and I learned from it, at that time, some unknown knowledge was gradually integrated in subsequent practices, and the wealth it brought has benefited me so far.

However, apart from being limited by his own learning initiative, his knowledge was limited to his vision. At that time, my vision could not be opened on the front-end, I have not studied Ctrip's log statistics system and publishing system. Now I have to use this knowledge to feel miserable and sorry.

If you have the opportunity to go to a large company, you must be sure to figure out what the company's wealth accumulation is in your own field, and then dig into it, understanding his historical stories and handling details are more important than focusing on how he did it, but on why they did it. Then, I asked more demos and put them into practice in time, this fortune is in your pocket. Looking back at my career choices, I actually regretted that I had abandoned Alibaba (a systematic front-end Team) for a small amount of money and went to Baidu (the new team is not systematic, even the front-end framework is not uniform). If we use Alibaba's humble attitude to learn some technical support, we will surely be able to use it infinitely.

The learning of technology requires a Learning Attitude and perseverance. In fact, as long as the investment is sustained, it will surely be rewarded.

Technical systemization

In small companies, because many infrastructures are not mature, this will give us the opportunity to systematize and serve our technical services, the systematic technology is the company's wealth and the technical barrier of the R & D team. It can greatly improve efficiency. This is an ecosystem. Once the ecosystem is mature, it's not easy for anyone to take over.

When we first arrived at the company, our system was in this state:

Each H5 project has its own independent login registration, native has its own native login registration, and even the server services are independent of each other, so that users become information islands, this will cause many problems:

① Every time you create an H5 project, you must register a Logon account to increase the workload.

② After we have an additional APP, the APP generates its own login Registration

③ After the H5 project is embedded in native, the account cannot be connected.

④ As more and more users and subsystems become more and more complicated, our users will become increasingly messy

One thing we need to do at this time is to sort out all subsystems and systematize our account systems.

Database Transformation

Here, the first step of systemization is to rebuild the database and make the sub-system a public table. Anyone with experience will know that there are many sub-systems in the company, basic user tables should be designed to be abstract enough to only contain core data:

① User ID

② User nickname

③ User's mobile phone

④ User Password

⑤ Avatar & Gender & Date of Birth & ID Card & Avatar ......

Of course, the user roles of each subsystem are different, so each subsystem needs to maintain a User Role table by itself:

1 // user summary table 2 // company users are not necessarily subsystem users, but subsystem users must exist with 3 var users = [4 {5 id in the company user summary table: '1', 6 phone: '000000', 7 name: 'nickname 1', 8 infos: 'Other public information' 9}, 10 {11 id: '2 ', 12 phone: '123', 13 name: 'nickname 2', 14 infos: 'Other public information' 15}, 16 {17 id: '3', 18 phone: '123', 19 name: 'nickname 3', 20 infos: 'Other public information' 21} 22]; 23 // User table 24 var a_users = [25 {26 id: '1', 27 roleId: '1' // visitor 28}, 29 {30 id: '3', 31 roleId: '2' // super administrator 32} 33]; 34 // User table 35 var B _users = [36 {37 id: '1', 38 title: 'Professor '// visitor 39}, 40 {41 id: '2', 42 roleId: 'associate Professor' // super administrator 43} 44]; 45 // User table 46 var c_users = [47 {48 id: '2', 49 address: 'xxxx', 50 title: '3pa' // visitor 51}, 52 {53 id: '3', 54 address: 'xxxx', 55 roleId: 'dimethyl '// super administrator 56} 57];

When processing user tables, in addition to abstracting basic user information, we may also need a layer of business public layer. In our company, for example, most users are doctors, therefore, information such as the title and hospital is often used. This public table is directly used at this time:

Both subsystem A and subsystem B use the same user ID as subsystem C, but they directly rely on public business associations. They obtain information such as departments and titles in public business, if this system is further expanded, it will be like this:

Public H5 Service

The second step of systemization is to integrate the H5 Server Service. When public services appear, public H5 pages need to be provided here, and a challenge needs to be solved:

① Each business has its own customization. For example, the fields required for registration are different.

② UI will be the first obstacle you need to persuade

Since it is a public page, it needs to meet the customization needs of some businesses. When the underlying framework is complete and unified, we can give business development guidance and restrictions with the power of specifications, only by doing well with public services can we truly improve our overall development efficiency

The first problem is that the business is limited. It means that the public service is not doing well and is not universal. You can change the design to meet the requirements.

The second problem is that when we already have public services, we must tell the UI that this is a public service and cannot be changed. The design should be centralized.

People in the company need to form public services, reuse, and efficiency thinking, so that everyone will recognize this. It is useless to say so much without the knowledge or disapproval of others, the unity of knowledge and industry is king.

A reasonable public page may look like this:

Therefore, our system will become like this in the future:

When our system goes far enough, our entire system may be like this:

Connecting H5 and Native

The third step of systemization is to integrate H5 and Native Resources. here is also the so-called Hybrid system. This step can be completed only after the first two steps are completed. Otherwise, it can only be called embedded pages, it cannot be called Hybrid, or mobile systemization.

The first step of integrating Native with H5 is to connect the account. In general, we force H5 in native to log on only using the unified page provided by native, regardless of whether the page is native or H5.

In fact, we logged on to the H5 terminal and made three sets of pages and one pop-up window, one set of Account Login (obsolete), one set of mobile phone number login, one set of mobile phone number login and third-party login, there is also a pop-up logon box on the page. Two accounts or personal information should not be allowed in each APP.

Imagine that if H5 has its own logon, the overall situation will become extremely complex. First, the APP has its own logon, And if H5 and APP have logged on to different accounts, there will be a user string. Of course, the APP can monitor H5 login status changes, but the technical implementation cost is relatively high and error-prone, therefore, we require all H5 logins to adopt a Native system. Every time Native opens webview, webview is injected if cookies exist, in this way, the front-end will have its own login status. Once the app deregistered the account, all the previous pages will be displayed and a new game will be launched. As a result, the Account System has been connected.

Hybrid

After H5 is connected to the Native account, we can implement our Hybrid process. Here we take the Header as an example.

 

Mainstream hybrids use Native headers for many reasons:

① Stability, anti-false positives

We don't know what will happen to the front-end, especially for third-party websites. If the front-end fails and iOS doesn't even have a button to exit, the app will be suspended, which is more annoying than crash.

② Experience

When we open an H5 page, there may be a white screen. If the header is not there, the experience will be poor.

When designing Header interaction, we need to consider the use habits of the front-end. It is best to keep the Business Code consistent and the performance of containers in different hosts is different. Here the design is left-right, the figure shows all the header styles we can provide.

We need to customize the tagname. all the buttons in the header are uniquely identified as tagname, so the tagname must not be repeated. Secondly, a default icon is commonly used for tagname. If you need to customize the tag name, you can read online resources.

Here, back is special. In webview, the history record is checked. If the value is greater than 1, the system returns the result. Otherwise, the previous operation is returned. We can see that the back function is very simple and often cannot meet our needs. Therefore, forward + pop animation is often used as the back function, this practice will cause a headache for history disorder. In this case, we have some special APIs, but this API requires Native support, so you need to be careful when using it, it is better to add a native Interface to clear all history webviews after the jump.

The Header Convention is an important part of Hybrid and also an important part of mobile systemization and technology systemization. It corresponds:

① Sharing conventions

② Logon wake-up Convention

③ Offline package Mechanism

④ Jump Mechanism

......

If the system is good enough, something similar to the SDK will appear, but it depends on whether you have enough third-party access Parties to charge for this, but as long as you do this, your mobile terminal has been systematic, and the account system of all H5 projects has been connected to the basic native.

After the formation of such systematic things, they need to be universal. For example, two apps can run the same H5 site at the same time, and even the offline package mechanism is consistent, and header interaction is consistent.

Data Visualization

After the above work is done, we have done a lot of things on the presentation layer. From the front-end perspective, we don't seem to be able to do much. In fact, let's take a closer look, this kind of idea is really a broken figure. Even if you want to finish the above work, it will take the effort of the boss. Besides, the real difficulties may really begin, as shown in our first figure, we have an outsourcing project. The outsourced user is out of our account system. What should we do? What makes us even more headaches is data collection and analysis. If you look back, you will find that you need to mine the front-end and data visualization!

With the accumulation of technology, the company's development, although the company's business is more and more complex, but in our system, it can still run well, but the business is the technology ancestor, we may receive such requirements:

① Show me the retention rate of users three months after the last welcoming Activity

② Please give me the order promotion rate of XX Promoters

③ Please give me the data of the promotion activities of the APP by xx qr code

④ Tell me why our conversion rate is low

......

User & Order Channel

I can believe that all of these questions will surely be asked by you. In general, not all front-end design can take these questions into consideration at the very beginning, nor can they be well designed without consideration, here is a brief description of the user's business channels.

To solve the above problem, we need to add some new fields when designing the user table. (It is painful to note that we will be annoyed when we do not have these fields at the beginning ):

① Project source, indicating which subsystem the user (Order) comes from

② Business source, indicating the channel from which the user (Order) comes

This channel is complicated. It can be the Pinyin of the promoter or the symbol of an activity ......

This design is actually relatively simple. It is just to add several data table fields. The real difficulty lies in front-end & native calls. In general, we hope that business development will be stored without feeling, so we can design it like this:

① Add a channel parameter to the url (cookie is OK, Which is troublesome)

If the cookie is not used here, the front-end framework is required for processing, so that this channel parameter is always taken during each jump.

② This new common field is added during each ajax request, so that the server can automatically process it.

Therefore, business development only needs to process the url (with parameters when generating the QR code). After the front-end framework is processed in a unified manner, each request is automatically included. For example:

Http://medlinker.com/h5/interlocution/index.html? Med_channel = qq

The native processing scheme is similar. After processing, we can collect the channel from which the user (Order) comes from. With this data collection, we can do a good job of subsequent analysis.

Complementing System

The above is the data collection of the business side. This is a precise custom result and can be directly stored through interfaces. In addition, we also need to perform data logging collection for the entire subsystem, for example, page pv + uv + Button clicking is a simple requirement. If an H5 site is used for multiple containers (and qq), and each container (Channel) the generated pv information needs to be recorded, which may cause some trouble.

Data collection is something I have prepared recently. In fact, I have a feeling that I cannot do anything about it. The first question is a headache?

Should we develop a collection and hitting system from scratch, or should we directly use umeng or Baidu to count such third-party items?

This is because I haven't figured it out, so I don't want to expand it. After this formation, our entire system will become like this:

After nearly a year of hard work, we have gradually built this mobile system and are contributing to each part. The following modules are still missing:

① There is a lack of data visualization. As mentioned above, this is what we need to complement next. Here we also include data collection, storage, analysis, and presentation. In short, we can do a lot.

② General IM message system missing

We now use Native's own IM, H5 and Native because they used to be two teams in Chengdu, Beijing and chose the cloud-based system. Now the entire messaging system is not interconnected, so it needs to be interconnected here, even if you choose a third-party service in the future, you must remember to let your server do a port reception and a proxy. If you need to change the message system later, it will be much easier!

③ Log monitoring

Our log monitoring and warning are not well-developed. Here, we need to enhance the front-end warning and server-side warning.

④ Full-site https

......

In fact, apart from the above, there should be many other system modules not proposed, such:

① Development Environment

The general environment is divided into four environments: development, QA, Preview (production of a machine), and production. The environment is easier to differentiate, but the difficulty lies in the problem of data processing between the General publishing system and various environments, for example, the QA environment requires some data in the production environment. What should we do at this time ???

② Small traffic release

Sometimes, we may need to release small traffic for testing. On the one hand, to focus on traffic changes and to confirm that there are no errors, we need such a system, at the same time, we also need our visual system to record the conversion rate and other data in various situations.

This is just the mobile system that I (from the front-end perspective) Know. It may be very different for someone to change. No matter what kind of system, we must ensure that, your company has a system on which development depends. This system will greatly improve development efficiency and stability!

System Design

In my opinion, the design and emergence of the system are neither overnight nor out of thin air design, but out of business, every time we need to add modules to our technical system, we need to think about the following issues:

What are the pain points of our development?

This requires us to have certain characteristics:

① Have a strong awareness, can understand the performance defects, the reasons for low development efficiency, and can provide effective solutions, and then abstract them above

② Find a way to effectively promote and handle the old and difficult problems shelved by the Team

However, our systematic things are not produced by family planning. This general design must be documented and discussed with people. The flow charts and sequence diagrams necessary in the technical solution must be standardized, the key parameters to be completed in the design should also be marked and finally used as the acceptance criteria. After the solution is released, confirm how the solution is implemented, what the operation route is, what the execution plan is, and how to deal with the resistance between teams.

For example, the above General login registration page requires relevant documents to clearly describe what is the boundary of our things, what problems can be solved, and what restrictions are imposed, we have a long way to go before pushing system design.

Work attitude

Another endless learning I learned during my work in Shanghai is "positive energy". In fact, positive energy does not allow you to write a few more lines of code, but it will make your work continue to rise, it corresponds to negative energy. If there are some friends around you that produce negative energy, you must be careful. The negative energy will indeed allow you to write less code.

At that time, when Ctrip wireless was disbanded, we needed to be integrated into other teams. Without knowing it, we had some negative emotions. We were raised by our stepmother. We certainly had no good time in the past, as a result, there were also preparations for changing jobs during that time, while the performances of the two old brothers in the team were quite the opposite. One old brother was still working diligently, helping the team and the entire company go through the difficult technical handover period at that time, another old brother actively assisted the new team in promoting the new framework, and even the framework was not written by us.

Later, I often communicated with two old brothers. One old brother (from Huawei) gave me the "tolerance, rolling, and harshness" stunt, and the other old brother gave me the meaning of pishi, in fact, these principles are really simple. When we are in good condition, we are naturally frustrated. So when we are in adversity, should we abandon ourselves and be depressed?

Today, I often like to ask two old brothers for questions. I also learned from them. In fact, while focusing on technology, coordination and promotion capabilities are also crucial, because many businesses are currently being implemented by several departments. If there is no good pushing capability, it is very likely that there will be a set of iOS, Android, and frontend, this is a waste for the entire company, and someone needs to come up and organize the integration.

Team battle

I like martial arts very much. Recently I especially like a piece of drama in the sword rain:

At that time, I was one of the three masters of runner Wang, including Lei Bin, colorcast artist, and drizzle (which can be ignored in big s). The colorcast artist proposed how you and I joined hands to kill runner Wang, and opened a condition to wait for the transaction:

I (colorcast) only need the remains of Romo

All property to Lei Bin

Drizzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Apparently, the price code of the colorcast artist is enough to make people feel tempted. He also put forward his sincerity and focused on the runner Wang. At this time, Lei Bin began to wait and see, however, with a drizzle of "you play, I went home to eat with my friends", the entire transaction was blocked.

This drama is really amazing. I would be surprised if the three of them suddenly reached an agreement and ran to kill the runner king. Considering that the film is only over 3/4, it may be easy for the audience to say that? However, from the perspective of real society experience, the probability of reaching this transaction is very low. One core reason is:

This deal involves the interests of the majority of people and even life. Once one thing involves the interests of multiple people, it will be very slow and difficult to reach an agreement.

When we do one thing, it is more difficult than a person to work with others. The differences between ideas between people are enormous. Let's look at the needs of several main figures:

① Runner Wang, need Romo's body long jj, good xxoo

② The colorcast operator needs the remains of Romo for medical treatment

③ Leibin: Money and uncontrolled

④ Light rain, love, and family members are not hurt

⑤ Big S, maybe you need to pay attention to it.

We can see that the core conflict of interest comes from the runner Wang and the colorcast. This is why the colorcast in the newest must first make a shot and express sincerity. Other people can wait and see, you can exit.

Likewise, there is a huge difference between people and people in the team, which is even difficult to reconcile, there must be a mental retardation or especially selfish or lazy person, or a desire to communicate with a superior. As long as a teammate has one or more problems, the entire team will be involved, however, it is a matter of internal consumption, but such internal consumption often takes more energy than serious work.

In the team, each partner has different personalities and is competitive with each other. Then there are different teams, and products and R & D are opposite to each other. Even a company has different internal factions, as small as a family, brothers will break down the wall and talk about each other in the end. They compete for rights. Except for their own people, they are not their own people. Even if they are others, they will not be able to stop at any time.

Because there are different people, the product needs to be changed, which is worse than the code changed by the Development. The products of the Shanghai branch bullied the R & D of the Shenzhen Branch, it is even worse than the dead UI around us. People can easily find different groups of people as enemies, such as positions, regions, and closeness, therefore, disputes are difficult to stop. It is obvious that we can't do anything to solve the topic of Buddhism. Therefore, it is critical to select people.

To sum up, we need to make the team combiner:

① First, we must have a good plan.

2. A good leader

③ Then find the right person

⑤ Finally hit a common enemy (Project)

A good direction can produce good results, and any unplanned things have little effect. A good leader can unite the team. The technology should be excellent, the vision should be far enough, and the competition for business should be fierce, however, if you are not in charge of the team, you must remove them in advance if they do not match the team's temperament or even have a negative effect (persuasion is the final means, and more is the impact ), otherwise, the entire team suffers losses.

Here, we will emphasize the role of leader. The team's combat power needs to be stimulated by leader. As the executive will and core driving force of the company, leader must take the lead correctly, you must have a sense of responsibility and crisis, be good at reporting, and compete for business. If your leader always pushes the business out, then this leader is unqualified.

Because we come to work and make money. First, we come to make money, and second, we have the friendship of our team members. If there is no business, there is no KPI, and there is no money without KPI, even if we do not have the most basic development, we will not be able to continue in front of the company. We are here because of this business. Dreams and passions are scarce consumables, not owned by everyone.

The relationship between individuals and teams is contradictory and unified. The pursuit of personal ability to maximize growth must conflict with the interests of the team. If you can use the team properly, you can break the limits of the individual, therefore, teamwork is the key to breaking through everything. The strength of a person is limited, and it is easier to break through in case of difficulties. If you find something that only you can do in the team, you should be careful.

Conclusion

I wrote this article because I failed my driving test yesterday. What I wrote at that time was quite negative. So today I took some time to reorganize my thoughts and emotions and actively face 2017 together !!!

In fact, small companies have many unique advantages, and many pitfalls are waiting for you to do and think about. As long as you can fill these pitfalls one by one, you will surely make great progress, it can also break through the bottleneck as soon as possible.

The ideas in this article are personal thoughts. If you have any questions, please actively exchange them.

Finally, I have completed the retake of subject 3 !!!