This article was first published in
Ou LeiLiu. As I will be adding, revising, and polishing articles from time to time, please read to ensure that you are seeing the latest version
The original.
In the last article of this series, “The Rethinking of a 32-year-old” Code Farmer: A Freshman “, I told the story that I entered the industry through two working experiences of about three years, which gave me a general understanding of the profession of “front end engineer” and the general appearance of the software development industry. Although my own problems were partly to blame, I think they limited my growth to some extent
Choosing which company to work for is a matter of great caution. Going into the wrong company could ruin your life. I’m not kidding! Don’t look down upon human weakness and the role of the environment.
– the ray”A front-end career trajectory”
In the work experience described in this article, as the working environment improved, I also began to change
Thorn in both software
In late March 2013, I joined a company that “makes software”. The term “making software” is used because the company’s structure and relationships are a little complicated, but listen to me
The company I signed the contract with is “Thumbu Software”. The business of the company is to make some outsourced mobile terminal applications. However, it is not an outsourcing company. It is supposed to be a temporary business to survive. The company’s founding team is all from 2K China, 2K’s China branch.
In the process of development, two more “subsidiaries” were established, which are “Youyu Education” which does online education and “Black Fire Game” which does games. Although my contract was signed in “Cashu Software”, I was doing an online education platform called “Youyu” from the beginning to the end. Blackfire games are best known for their titles such as Runestone Keeper and Out of Control. (The makers of this game became Spark Studios, but with the same people.)
And, for some reason, Sickleberry is also connected to the game of Sugarberry…
At first, the online education project I participated in was the flipped classroom for middle and primary schools, which customized the system for local schools in Hangzhou in the form of “stickers”, such as Hangzhou Caihe Experimental School and Hangzhou No. 14 Middle School. Later in the form of SaaS platform route, it became a “fish”, its function is around the “course” to launch, in addition to the course, there are tasks, exercises, questions and answers, organization and social function modules —
“Youyu” is a flipped school built from an international perspective. It provides flipped classroom teaching services for international advanced courses such as English, creative computing and robotics, as well as cloud software services such as “flipped classroom” and “Blackboard newspaper”.
As the latest generation of online teaching system, “Youyu · Flipped Classroom” integrates MOOC (Massive Open Online Course Platform), SNS (Social Network), game-based teaching, data-based analysis, encyclopedia and other advanced educational concepts. Through the construction of SaaS (Software Service) mode, it aims to build the first platform of “Flipped Classroom” in China. Provide humanized, informationized and customized teaching cloud services for schools, enterprises, teachers and individuals. “There are fishing, flipping the classroom is always in line with” let defensor its teaching, scholars enjoy learning “service tenet, teaching, learning, three aspects of integrated design, mainly teaching management combined with a study and communication, based on the three roles, create a five functions, and taken four big advantage, advocate open thinking, independent teaching, mutually promote each other, Finally, we will realize digital and innovative education with mutual benefit and mutual benefit.
— Forget where you got the introduction
Users of the platform are divided into two identities: “trainees” and “teachers”. The front page can be accessed without any difference, while the back page will be different according to different identities: trainees check the courses they are learning, tasks they are doing, wrong question sets, Q&As they have participated in, organizations they have joined and friends list, etc. And the teacher is to carry on the course, exercise, task management and so on. In addition to the PC side of the Web page, the platform also has an iPad client.
Since the Web framework used here is Ruby on Rails (hereafter referred to as “Rails”), the front-end technology selection is also a priority that combines well with it, such as: CoffeeScript, Sass, Compass. It doesn’t matter if you don’t know Rails, but whether it’s CoffeeScript or Sass or Compass, you’ve never heard it before, so you need to learn it from scratch…
Although the product line is relatively simple, the function is not very complicated, but after all, it is an Internet product. AngularJS, React and Vue were not popular in China at that time (React and Vue had not come out when I first came to this company), and the complex application framework is mainly famous for the Backbone, jQuery still plays a very important role.
During this time, I built several wheels (toys) based on my working practice, which were basically written in CoffeeScript and Sass:
| The name of the | instructions |
|---|---|
| Painter (now called”Trick”). | Tool class Sass Mixin library |
| Tangram | Layout class Sass mixin library |
| Ronin | DOM independent JavaScript solutions, enhancement libraries |
| Miso | A “batch handler” to validate arguments and unify return values for each member function of a JavaScript Plain Object. |
| Tatami | JavaScript Tools Library (Beggar Framework?) |
| Matcha | A UI library that includes Painter, Tangram, and Miso |
| Video.js Progress | Video. JS based progress bar enhancement plug-in |
| Video.js Track | Video. JS based text track enhancement plug-in |
| jQuery Cascading Tabs | Cascading TAB component based on jQuery and Matcha |
| jQuery Pagination | Page-turning component based on jQuery and Matcha |
| jQuery Double-list | Double list (shuttle box) component based on jQuery |
| H5Fx | Based on the jQuery andHTML Forms specificationThe form validation plug-in |
While most of these libraries are no longer maintained, their variants and libraries that are still being maintained continue to generate value in future and future projects that I work on.
With the continuous increase of business requirements, pages become more and more, and resource files become more and more large, resulting in the page loading speed continues to decline, accelerating page rendering has become an urgent matter. So we decided to reduce resource file requests by turning the website into a single-page application with Turbolinks.
It should be noted that the single-page application implemented with Turbolinks is different from the current well-known solution, it is completely runtime solution: When clicking the link of the next page, it will first judge whether the page has been cached in memory. If so, it will directly replace the content in the current page . If not, it will get the page content cached and replaced through Ajax. At the request page content stage, there is a thin load bar at the top of the page; The default is to cache up to 10 pages of content.
The operation of the project is based on the Tatami I wrote. All kinds of initialization logic depend on the original page life cycle events. After the introduction of Turbolinks, the original “ecological balance” is destroyed.
After several days of investigation and research, I finally wrote an adapter to solve the
In order to improve collaboration efficiency and reduce communication cost, I worked with interaction designers and UI designers to organize and develop a UI document for communication, and set up online browsing pages on GitHub with Jekyll. This document has two main functions: it is a set of Design specifications like Google’s Material Design, which designers should refer to when designing new pages and making annotations; Like API documentation, tell developers how to use it.
Backgrid and Modelbinder are introduced into Backbone and its surrounding Marionette, Backgrid and Modelbinder due to the increasing complexity of application. However, this is mostly done by another colleague (ヘンタイ) and I’m not too involved.
When I first came to this company, there were about 10 people involved in the development, and the number of people involved in online education and games was almost half and half. I was the only one who was dedicated to the front end. About a year later, more developers were working on online education: one front-end for Rails (ヘンタイ), one full-time front-end, one quality assurance (QA), and two iOS developers. There was one UI designer, then another came along, and then another interaction designer (the only one I’ve had in my career so far).
Here, I changed the task management tool twice in my memory: from Trello to Tower and then to Teambition; Code management is based on Git Flow using SourceTree in combination with GitLab. Every morning, I will stand behind the general leader of the team and ask the corresponding person in charge to explain the relevant situation of the task according to the order of the task Kanban. When the task is completed, I will update the status of the task and assign new tasks. Training and sharing are not often, but sometimes.
In general, this company’s benefits package, with the exception of the “Marni” related downsides, has a few bright spots compared to other companies I’ve worked for: no overtime; Paid annual leave from 10 days, each full year plus one day! Even though it was so liberating and so work-life balance, in the end I left because of its prospects and problems with “Marni”…
Why does the company have serious problems with Marni? I think it may be because the boss is very idealistic, very sentimental, want to slowly polish the product, do not want to go to investors for financing. Maybe it is for this reason that a work-life balance environment is provided for employees, which makes them feel free.
After I left, others left with the same problem, and the people who made the game “packed up” and moved to another place to continue making the game under the name “Spark Studios”.
Looking back, I am grateful for my experience here, which not only provided me with great benefits, but also helped me develop working habits that would have an impact on my future career. More importantly, I met and made a girlfriend here, who later became my wife.
Buy/sell nice cars
In mid-September 2015, I joined a company in the automotive field. It changed during my tenure — from “buy good cars” to “sell good cars” to “sell good cars” to “buy/sell good cars”, hence the term “buy/sell good cars”.
When I first entered the company, I positioned myself as an important role in the team, not as a leader, but as someone who helps the team improve productivity and leads and improves the overall level. Facts have proved that I have done it to a certain extent, their own satisfaction.
The results of my work at the company are in the book “What did I do at” MHC “? In the more comprehensive has been expounded, here will not repeat. However, as the text says —
This article focuses on what I did at MHC in addition to day-to-day business development. The list is all about the impact on the front-end team, on the technology department, on the business of the company more or less, half done or failed to do things are not too embarrassed to mention.
– the ray”What did I do at MHC?”
Even so, there is one half-done project that needs to be mentioned, and that is the “Development Resource Center”, code-named “JCW” (the name of the top Mini model)! In my mind, it was a very weighty and meaningful project, and I didn’t finish it because I left my job. The following say its weight and meaning are reflected in —
Obviously, this is an internal management system. As its name suggests, the Development Resource Center manages development-related resources to improve collaboration and development efficiency. Some of the features included were planned at the time: editing and viewing data interface documents (somewhat like the API documents generated by Swagger) and mocking data against the API; View and manage (upload, delete, etc.) static resource files that have been uploaded to OSS; Release and version management of foreground application (single page application); Background application (traditional multi-page application) front-end data release and version management.
Other will not expand to say, but the background application front-end data release and version management this should be specifically said, because it is a according to the planning at that time will make a visual structure of the function —
Backend system page common mode is used for data lists, forms, pages and the details of the CRUD page, when the interaction of supporting these scenarios and core logic of data processing are abstract, after you find how to improve the UI framework also won’t have again as before obvious efficiency, at most is to optimize the interaction and development experience, It just makes it more stable.
You’re thinking, “What can I do to continue to benefit development?”
The UI framework made before is highly encapsulated for interaction logic and data logic, and provides a large number of CSS classes and tool methods. While this allows you to write a lot less CSS and JS code when creating a page, it does not reduce the amount of HTML code.
It looks like a breakthrough point, but how do we do it?
As you ruminate, you suddenly realize that you used to use WordPress, a blogging system based on “the best language in the world.” Since the backend system pages are so stereotyped, why not copy WordPress and use the immutable parts as “themes” and the mutable parts as “articles”?
Doing so will bring another benefit, that is, the page code data, what pure front-end problem modification is only data correction, and do not have to go long and complicated operation and maintenance release process. In the future, if the company has its own design language and adds the feature of visual construction, it will not be necessary to participate in the development and maintenance of the business background system.
Ideally, a product manager would drag and drop existing materials to create a “prototype” that would be the final interface; After the business function is determined, the back end develops the model, writes the interface, and then configures the data presentation of the interface. In this way, the role of the front end can be largely ignored throughout the business system iteration.
So what does the front end do? In this collaborative mode, the main job of the front end is to improve the repository and make it easier for product managers and back-end developers to use. It’s exciting to think that the benefits of this approach are not on the same level as developing a UI framework!
– the ray”Is there architecture on the front end?”
This is what the “Development Resource Center” means at the business and collaboration level, but it also means a lot at the development level!
It is a Node.js front-end/back-end integration project, although there have been Node.js front-end/back-end integration projects before, but they are all written in JavaScript based on Express. In order to become a benchmark for Node.js front-end and back-end projects in the company, the project chose Nest as the web framework and was written in TypeScript.
At that time, I was working with the design team on the design language of the company, and planned to work on the icon library together next, but I didn’t see the result due to my resignation.
Here’s an overview of what I did in “MHC”. The business of buying/selling good cars during my employment and some of my experiences —
As mentioned above, the company has undergone a transformation during my tenure. However, as far as I know, before I joined the company, there was another business in the early days of the company, which seemed to be related to cars. It was a social product like Baidu Tieba, where you can post. Since I don’t know much about that history, let me tell you what I do know about “buying/selling good cars”.
In 2015, a parallel imported car e-commerce platform called “Buy Good Car” was born in the entrepreneurial circle to C. All you need to do is very simple, “as long as you have the money, as long as the steering wheel on the left side of the car, you can find a way to get any car.”
At this time, the business is very simple, the application is very few, basically is a user-oriented main station, a background system for internal management, as well as iOS and Android client. Among them, the client can be said to be very simple from the perspective of architecture, that is, the mobile web page covers the shell of the native client.
The design of the main page is still good, after all, whether at that time or now, there are several copycat websites in the design, some are also selling cars, some are selling watches. However, how about the front-end technology? I believe I have seen the book “What Have I Done in” MHC “? And then you know it.
During this period, there were basically one or two activities every week. Writing the activity page became my main work, and occasionally I was assigned to modify the functions of the main site or the background system.
What impressed me most was the activity of killing imported cars on “Double 11” that year. The whole life cycle of this project is not very long, and even makes me feel a little rushed. The day before the event, I worked overtime until after 4:00 in the morning. After going back to bed, I got up again and arrived at the company before 9:00 in the morning. I was still fixing bugs just before the event began.
During this period, the company also made a P2P product, which was a mobile web page. This was just a small tentative project without much publicity. I still remember that there were a lot of internal employees who invested in this product, and I made no contribution to the financial cause of the company even though I was poor.
Around the beginning of 2016, the company gradually entered a transition period with the arrival of Agui, who is said to be from the “auto home”.
In the beginning, I was “captured” to be part of “Project X” in a third-floor cabin that wasn’t officially an office space. The name sounds mysterious, but also gives people a sense of being “chosen”… The task of this group is to complete innovative projects quickly and to try and make mistakes quickly. It looks like there was only one project, which was a car-sourcing tool called Finding Good Cars.
Later, the company was officially transformed into the “Sell Good Car” of To B, which helps small and medium-sized car dealers sell cars, and successively developed several business lines such as trading, finance, warehousing, logistics and so on.
Sell a Good Car started as a tool for merchants to post information about car sources, similar to Find a Good Car. The product form is divided into two parts: mobile client and PC web application. This client is a real native development, and basically only the marketing page is an embedded web page, unlike the “buy a good car” and “find a good car” clients.
Aiming at the lack of a good way to manage customers in sales, the DMS tool is introduced to help the sales staff to manage and return customer visits.
Published car source is a business to tell others what cars they have, want to find the car they need to search, and then go to look at the results of screening, which is obviously less efficient. In order to improve the efficiency of finding a car, the function of finding a car has been added. Don’t think too much about looking for a good car. This function is just like a “missing person notice”. After the information is released, it will be shared to the WeChat group or circle of friends. After seeing the relevant car source, people will take the initiative to contact the person looking for the car source, which improves the efficiency of car search to a certain extent.
So far, the functions of “selling good cars” have all been related to making business deals. Whether it is the publishing and finding of cars or the maintenance of customer relationships, there is no apparent profit in terms of money, other than reputation. But perhaps it is the company’s strategy to build word of mouth to entice more merchants to use the “good cars”, and then offer other products and services to make money.
Then, as I guessed, the company laid out the distribution of cars in various aspects, and launched a corresponding fee service
When buying a batch of new cars, a business may not have enough money in hand. What should it do? Looking for a bank? Need a lot of materials, fill in submitted may not be able to approve down; Even if approved, the quota may not be enough. In this link, the company provides a financial service that can apply for more amount of money with less materials and shorter process, and makes profits by charging fees, interest and so on.
Wait for the car purchase back, but the shop is small, there is no place to park, what to do? Don’t worry! The company has established some warehouses through self-construction and cooperation to provide warehousing services. As long as you find a nearby warehouse to pay the site fee, custody fee and other expenses, you can stop as long as you want.
Even the transport of the vehicles is controlled, so as much as possible, it is possible to check online where the vehicles are and what the transport routes are. Just like SF Express and other express companies that deliver general goods.
For users, the product only has the client end of “selling good cars”, but behind it, there are more than a dozen background systems and several micro-applications to process the order, waybill and other information generated by it. The majority of the R&D team’s daily work is to develop and maintain these backend systems and the functionality of the nailed microapplications.
I am the No. 148 employee of this company. In the past three years, I have made a lot of progress and made great changes in all aspects. There are a lot of challenges, there are a lot of ideas, some realized, some not in time to achieve; Based on practice, I have done several open source projects and written several articles. Not only push yourself to do things, but also start pushing others to do things, and try to take on some planning, management work.
In the first one and a half years, I was mainly engaged in front-line business, which consisted of regular product managers raising requirements, then various reviews, development and testing, and launching. Later, I gradually shifted to infrastructure. At that time, I was the only one in the large front-end team of nearly 20 people who was dedicated to this, while others were mainly engaged in business. Some of them were engaged in infrastructure while taking care of business.
Why would I get “special treatment”? I think it may be because I am mainly responsible for promoting infrastructure construction and improving efficiency, which is obvious to all. I have shown a strong desire to contribute in this regard. The other thing is, the business is growing fast, and you kind of realize that it’s not enough to just pile up people, you need someone to do something about efficiency. Although I specialize in infrastructure, I still have to support some “boss needs” and when there are not enough people to do business.
In a weekly meeting of front-end team in the summer of 2016, I proposed to use Teambition. First, it is convenient to manage and assign tasks, making team management more efficient. The second is that everyone can know what everyone else is doing, making information transparent to each other. While everyone thought it was a good idea to try it out, the task status update was not very positive after it was actually used. There was even a period of time when I used to remind everyone to update their task status in the group early or late at night, but the result was very little and it gradually disappeared.
After about a year or two, the technical department started to pay more attention to project management and for some reason Worktile was introduced… If I had known in advance, I would have recommended a wave of Teambition! After using Worktile, I find that Tetile is not as good as Tetile.
During my tenure, I fought with the product manager, mainly because the interaction or layout requirements were unreasonable or even anti-human. Backend developers will also be criticized, mainly because of their ability issues affecting the collaboration relationship; I had an argument with one person on the front end team, mainly because he lacked common sense and had a lot of questions about the accepted team norms; I once taught a younger sister in a junior high school. For a period of time, I felt impatient because she always interrupted my normal work with too many questions.
It takes two to make a quarrel. Having said so many other people’s reasons, am I okay? Of course not. My biggest problem is that because I’m so hard on myself, I’m a little hard on others. Because in the past, we basically rely on ourselves to solve problems and trouble others as little as possible, so we also hope that others can solve problems independently as much as possible, especially the collaboration needs to be as efficient as possible. In short, asking others to do the same for themselves, but often they do not. In addition, I am impatient and impatient.
The company’s benefits are similar to those of Evermore, with less intense overtime, which is the norm for Internet companies — overtime is required after the beta phase, especially near the launch period. And, most likely, it will be 2 or 3 in the morning when the launch is successful.
conclusion
This is where I start to “wake up” as a “front-end engineer” and a “writer.” Unlike the companies in the last stage, the companies in this stage can be said to be Internet enterprises, and the things they do are more challenging and can do more things.
Maybe it’s because I’m past the entry-level stage, and I’m a “nitpicker” and “dreamer”, always finding problems in my daily work and figuring out how to solve them. That’s why there are so many wheels [toys] and all the infrastructure stuff.
In the thorn twilight, because of a lot of spare time, and at that time more waves, always in Hangzhou city or jiangsu, zhejiang and Shanghai area in the wandering. At that time, I also made a plan named “Go to Hangzhou” :
During this period, I also took part in several technical offline activities, such as the 8th D2 Forum and the exchange activity held between BaiMin and Yihaodian. Among them, in the common people network was organized by Sofish, met the founder of Jianshu and Zhang Xinxu. Zhang’s style of sharing is similar to that of his articles.
After buying/selling good cars, I’m not so excited anymore. I don’t even touch the anime and games that I love so much… Usually after work is basically in the residence to continue to “work overtime”, to improve and optimize the infrastructure I maintain. Think about life or something, Sinai!
In the middle and later stages of buying/selling a good car, due to various problems encountered in the work, two big plans which could not be completed by one’s own efforts were successively generated. They are respectively “Front-end Knowledge & Skill Evaluating System” and “Anti-Chaos”.
Please follow WeChat official number “Coding as Hobby” (search for “Coding as Hobby” in WeChat) and read the latest technical articles. -)