The growth story of a front-end novice

It may seem a little late to conclude, but it’s better than nothing. Let me record 2016, the first year of my graduation, a significant year for my life.

My job search

Since entering the senior year, I have been deeply aware of the pressure of employment, and have been preparing for the society. Since September 2015, I began to submit my resume (technical recruitment is usually early) and returned at 8 o ‘clock every day. I finally lived up to my hard work for two months and got some good offers.

At the beginning of November, technical recruiting was almost over. Unwilling to be idle in school, I began my own internship. It is also a shame that DURING this internship, I went through three companies for internship.

4399 internship

During 4399 internship, I exercised a lot of things. Thanks to Brother Yong and Brother Xin for giving me the opportunity to try more.

In 4399, I was lucky to enter the UED department and work as a front-end engineer in the design team.

During this period, I first face multi-project programming, during this period accumulated a lot of actual combat experience, also began to write their own HTML, CSS, JS specifications. At the same time, during this period, I overreached myself and tried to build a front-end code tool — gulp, and wrote a crude Introduction of gulP — gulp Introduction based on my own understanding.

After studying GULP, I tried to apply gulP to the actual development work. Under the guidance of Yong Ge, I began to think outside the project and tried to use tools to free my hands, move towards modularization and write articles — using GULP in the project.

In 4399 this precious internship experience, let me have a deeper understanding of the big front end, “technology selection”, “construction tools”, “scaffolding”, so that the rookie who would only write a simple page before jumping out of the comfort zone of everything has been prepared, learning, creation, progress from scratch.

UC internship

After the Spring Festival, with the recommendation of Binhao and the help of Sister Nanfeng, I had the honor to enter UC for internship and start a new journey again.

In UC, I worked in the overseas business group, developing crawlers based on NodeJS.

Before this, ALTHOUGH I have a preliminary understanding of NodeJS, I have learned from books. But I’ve always felt that learning on the front end, or even technology, is hard to really learn without being project-driven (whether it’s a business or a requirement you create yourself).

The first thing I did was to learn the coding specifications of the project team, including naming specifications, code indentation specifications, writing styles, annotation specifications, etc. Only then did I deeply feel how important an excellent specification is for the good operation of a team.

In the later crawler development, I increasingly felt the importance of coding specifications, code readability and code review for the team. I used to think that these things were very empty, but when the team is getting bigger and the business is getting heavier, if the code is not readable, it will seriously slow down the team. At the same time, strict code review can prevent many unexpected problems in the future. I never thought that the code I wrote would suck…

In crawler development, it increasingly feels like NodeJS has revolutionized the “front end”. It takes the “front end” out of the so-called “slice chart”, where a crawler can write just a few dozen lines of code and run well enough to support a huge business. At the same time, NodeJS makes the front and back end of the programming language communication barrier, can better collaboration.

During this internship, I learned and became familiar with many necessary skills, such as regular expression, Promise and command line operation.

Now the owner

Due to a series of coincidences, I came to my current employer. I have been working for 8 months, during which I experienced all kinds of ups and downs and made great progress in my skills.

Thanks to the eldest brother, without his decision at that time, I would not be who I am now, endless gratitude ~ (although I do not know why he took a fancy to me at that time…)

I don’t want to say how I got hired, but this experience was an absolutely significant turning point in my life, which enabled me to start a new career and gave me a deeper and more complete understanding of entrepreneurship.

Yes, I just joined a promising startup!

Here, I am a member of the initial team, under the guidance of the boss, step by step in the front of the road to go further and further.

Our team is “JavaScript full stack development team”, here to make a small advertisement, welcome like-minded you. Since I joined the company, my title has been “Client Development Engineer”, mainly developing our APP. Yeah, you guessed it, REACT NATIVE.

After the boss gave me the initial framework for development, I got to work. However, how do I start? ! At that time I several degrees meng force, gnash teeth began to grope.

At the time, I didn’t even know how to use Github.com, so I started with documentation and the starter Kit my boss gave me and worked my way through it.

From setting up the development environment, I was in deep pain… It took me two days to figure out how to run the Starter-Kit in Windows. After a lot of research, I came up with an article about installing the React Native android environment in Windows.

To be honest, setting up an RN environment is pretty tiring…

Once the development environment is set up, it’s time to learn how to write RN. RN uses a whole new set of XML tags and a whole new set of CSS syntax, and while it looks the same format, there are different learning costs behind it. After that, I began to use my previous mobile web development experience to explore the development of mobile pages. Looking at the design, explore the use of REM, percentage, flex in RN to create a multi-screen fit page.

I still remember that when I was developing the first page, I had to rewrite a line of code for three times. I basically finished a page and then knocked it down and did it again. In two days, I finally made a page that was basically similar to the design draft. When I saw the results, it was worth it.

And then, of course, there was a lot of climbing. Anyway, during this time, I found out:

  1. Github plugins (star, issue), js.coach/ React-native/is a good choice if you are looking for RN plugins

  2. NPM versioning is important

  3. Technology selection

  4. The art of organizing code

  5. Foresight and expansion ability of project structure

  6. Dig deep into the business requirements, think about everything, and avoid tagging your code as something you’ll have to rewrite later

APP development to a certain extent, encountered JS can not solve the bottleneck — access to the native SDK. Because of the business requirements at the time, there was a point where third-party plug-ins could not meet the requirements. To do this, you have to go into Android and ios and write a plugin that RN can use. When I looked at client-side native code (Java, Objective-C) it was really confusing, especially objective-C, and the new way of writing it made me think about my life for a day.

I had no choice but to copy the existing third-party plugin library, half copy and half write. On the way, I have already forgotten how many QQ groups to ask people, and I cannot remember how many friends I have found and how many groups of friends to ask questions. I only remember that my colleagues said to me: “there is no gully in front of the steed”…

Eventually, I became more familiar with RN, and it became easier to develop. Of course, it was necessary to climb the pit, but it was not so painful. When the business was not so heavy, I quickly bought a few books on android and ios and devoured them. I feel like I’m back in the early days of pre-school, “JavaScript advanced programming”…

By the time the project reaches a certain size, the poorly written code and the inappropriate architecture of the project have seriously slowed it down, making it difficult to develop the project efficiently and quickly. After much deliberation, I decided to refactor the project code.

This refactoring has really been in the works for a long time. I collected all the uncomfortable points I encountered when writing business code, and then went home from work every day to think about how to better meet the business needs under the premise of efficient and rapid development. This code refactoring focuses on the following points:

  1. Transform very generic components (Toaster, Confirm, Picker, and so on) from being applied as XML to function calls. For example, I needed Toaster to be included in the render component to add the
    tag. Now, you just need to negotiate toast.error (new error(‘ error ‘)) when needed; To complete the call. React + redux {if-else} {react + redux}

  2. Reorganization of store redundancy in the project, not enough fine problems. At present, store organization is carried out in the dimension of page, and some universal stores are supplemented at the same time.

  3. Reorganize the organization structure of the page code, adjust it to a more general, standard organization structure.

It’s not a joke…

Other agreed

Reading:

Read but not limited to:



Crazy Android handout

       

       

       
Javascript you Don't Know (Volume 1)
< NodeJS>
The Definitive Guide to CSSCopy the code

Three technical sharing sessions:



The 2nd FEDay Front-end Annual Conference
"Tencent IMWeb >
The 3rd CSS ConferenceCopy the code

Special thanks to the lovely staff of Yuboda and front end circle for bringing us two grand high quality front end technology sharing conference.

Attend more technical meetings, can greatly expand their own technical vision oh!

Outlook 2017

Technically, there’s still too much I don’t know. In 2017, I hope I can make persistent efforts to continue my dream of being an excellent front-end engineer.

Read more (15 books), write more, Summarize more (15 to share).

At the same time, I hope I can contact more things besides technology, and try my best to expand and broaden my vision and communicate!