Build@Mercari from Week 5 to 7: Frontend, Backend, and Becoming a Software Engineer #BuildAtMercari

Hi, there! This is Mark (@TangoEnSkai) from Mercari’s Backend Engineering Team.

Every Wednesday night from May 27th to July 8th, our Build@Mercari participants and the Build@Mercari staff were conducting intensive software development basic training, covering topics from data structure to actual frontend and backend development exercises. As Week 7 was the last week of our training, we had a farewell party with several talks by our engineers!

Today, I’d love to share what we covered with the participants from Week 5 to 7.

＜Here are the topics and subjects we covered:＞
Week 5: Frontend Basics
Week 6: Backend Basics
Week 7: Farewell Party with Talks

Week Five: Frontend Basics

Previously, we had covered development flow, data structures, and algorithms to give a basic understanding of how to program and solve some theoretical, as well as real-world problems. From this week, we focused on actual web development with a hands-on approach.

On June 23rd, we discussed basic topics of frontend development and related techniques. Mytt, a software engineer working in the CRM Frontend Team, was the main instructor. During his lectures, he touched on topics that included:

・ HTML
・ CSS
・ JavaScript
・ Web Related Technologies: React, Vue, Webpack

Unlike the previous lectures, Mytt conducted a “live-coding” style training. He explained it from the very basic topics of frontend development; HTML and CSS.

Live coding lecture by Mytt

By using the simple functionality of HTML, he demonstrated how to create headings, hyperlinks, lists, and images on a web page. After that, he showed how a CSS code affects web page styles that are written in HTML

CSS for Simple Styling

After learning about basic techniques for HTML and CSS, he explained what a responsive web page is and how to make it. DOM (Document Object Model) was the next topic, with this concept he explained how to build a simple web page with JavaScript covering the questions below:

・ What is the DOM?
・ How do you query elements?
・ How do you add event listeners?
・ How do you change DOM node properties?

In terms of JavaScript related topics, we discussed the nature of JavaScript and synchronous versus asynchronous codes:

・ What is JavaScript good at?
・ What is JavaScript not good at?
・ What is the difference between synchronous and asynchronous calls?
・ How do you make an asynchronous call to an API endpoint?
・ How do you do error handling in JavaScript?

At the end of the lecture, he introduced the assignment which had the following two parts:

Part One: Create a card

・ Required knowledge of basic HTML and CSS
・ Make a creative design rather than just using a given CSS file
・ No design limitation, glowing buttons or interesting effects, anything is welcome
・ Optional: use JavaScript to add some special action on the card

Part Two: Create a blog-like website

・ Required to code in JavaScript and create an interactive website
・ May use JavaScript framework (using a previously used one or something new)(Vue or React)
・ May use any kind of UI framework(ant.design, bootstrap, material-ui, or without any CSS is also acceptable)
・・ User should be able to create a new blog
・・ User should be able to delete an existing blog
・・ User should be able to edit an existing blog
・・ User should be able to see the details of a blog
・・ User should be able to see a list of the blog
・ Use a mock server or some serverless services (ex. Firebase) to store your data

It was recommended to consider setting up a development environment by using Webpack or something similar; design some cool CSS; structure your CSS in some way (ex. a standard like ckan); use state management library (ex. redux comes with React or vuex comes with Vue).

Week Six: Backend Basics

In the previous week, we talked about the basics of frontend and aimed to build a simple interactive blog web page. In this week, as the final technical training session, we were introducing the basic concepts of backend development. This lecture was conducted by two backend engineers, VeysonD and Domi. VeysonD is working on a backend team called Master and Domi is working as part of the Backend Listing Domain Team. In this lecture, we had seven main topics:

・ HTTP (Hypertext Transfer Protocol)
・ Servers
・ Databases
・ Hosting
・ Testing
・ Authentication & Authorization
・ Architectural Patterns

They started their explanation from the definition of HTTP and moved to what an HTTP request is, how to build a simple HTTP request, as well as several HTTP status codes. They also showed the actual HTTP message while sending a request and explained a little bit more what an HTTP message format looks like for both requests and responses. The basic meaning of each HTTP status code and some well-known codes were also introduced. After that, as a hands-on exercise, people tried to use Postman to send HTTP requests and get some responses from the internet.

The next topic was servers. Again, it started with the definition of a server before moving to sending a request to a server, server responses, and scaling servers. As we discussed the basic concepts of the server, we tried to send some requests and get responses from YouTube. Scaling was also introduced briefly to give the basic idea of vertical scaling and horizontal scaling.

Databases were another main subject and in this case, the main discussion point was when and why we use it, as well as ideas of relational databases versus non-relational databases with their advantages and disadvantages.

Several hands-on exercises were prepared during this lecture also:

・ SQL Database Hands-On I: Run simple queries　※Example
・ SQL Database Hands-On II: Select customer country “Germany”　※Hint
・ SQL Database Hands-On III: Find all orders that include a product with “ID = 1”　※Hint1、Hint2

After working with some queries and trying to get the desired outcomes, we discussed hosting, which included building out and managing your own infrastructure. Nowadays we generally use cloud services such as GCP, AWS, or Heroku, but it’s possible to use your own computer instead. They also introduced the concept of testing in the backend, including white box testing, black box testing, and other types of testing like unit, integration, and e2e testing.

The remaining topics for this week were Authentication & Authorization, as well as Architectural Patterns. They explained the key terminology and some related techniques briefly. For the final topic of Architectural Patterns, a few patterns and bonus topics were introduced with their advantages and limitations:

・ Publisher and Subscriber
・ Client and Server
・ Master and Slave; Broker;
・ gRPC, Docker, Kubernetes

As the finale of the Build@Mercari training weeks, the assignment was basically extending the previous week’s frontend assignment, which was to make a blog. The task requirements are below and the participants actively worked on the homework, asking lots of questions and sharing ideas.

・ Create Endpoints that do the following:
・・ Respond with all blog pages (GET request)
・・ Respond with data for a blog page (GET request)
・・ Handle creation of a blog page (POST request)
・・ Handle editing of a blog page (POST or PUT request)
・・ Handle deletion of a blog page (DELETE request)
・・ Respond with the correct HTTP Status Codes for every request above
・ Store data:
・・ Basic: store on a file system (ex. JSON files, text files, XML files, CSV files, etc.)
・・ Stretch: setup a database of your choice (SQL or NoSQL)
・ Provide authentication for your blog system (user name + password login):
・・ Basic: sessions
・・ Stretch: token based – ex. JWT (hint: Auth0 or Firebase Auth)
・ Ensure your code is properly tested:
・・ Basic: unit tests
・・ Stretch: integration / e2e tests
・ Stretch Goals:
・・ Deploy your application on a cloud provider (such as AWS, GCP, Heroku, Azure, etc.)
・・ Containerize your app with Docker
・・ Setup Kubernetes (service + deployment)(Setup Kubernetes (service + deployment)

Week Seven: Farewell Party with Talks

Message by Mark: “In the final two weeks, we had participants study frontend and backend development. And even though there was a very tight schedule for the last six weeks, everyone worked very hard to learn the basics of software development and you successfully passed the tough assignments. I would say thanks to all Build@Mercari participants and their passion to learn new knowledge by aiming to be a leader in the software industry in the future.

The last week is more about celebrating the very first Build@Mercari training program with all participants, instructors, and our staff. Personally, I still cannot believe we have successfully finished this program. It would not have been possible to conduct without a lot of people who applied for the program, interviewed, and joined our training. In addition, although this program was started with a few core members, we now have a lot of Mercari staff supporting us. They are engineers, interpreters, designers, project managers, technical project managers, engineering managers, executive officers, and more.”

During the event we heard comments from several people and talks from Mercari engineers. Some people shared their reflections on the lectures and some of our participants spoke about what they enjoyed the most, and also what they had learned. In addition, they shared their goals for after the training and what they wanted to try to do in the future.

Suguru, our CTO, was kind enough to comment positively on the program. It was very interesting and inspiring to hear his comment about enriching diversity in engineering at Mercari, and he also encouraged the participants to try to take on more and more interesting and amazing challenges as software engineers. We hope the participants continue to enjoy learning how to develop software and in the near future, they build more software that will help society.

We also prepared three talks for the participants. First of all, I talked about my personal journey to become a software engineer after having several different experiences when I was a student. Sonny kindly shared his experience about iOS development and software development with mobile applications, while Tutti shared her career experience and thoughts about the importance of community in tech.

We also invited all instructors from Week 1 to 6 to share what they felt about their sessions and this program in general. Instructors also gave many meaningful messages to the participants and good advice on how to become a software engineer.

Shibui, an Engineering Manager on the Machine Learning team, spoke about Mercari’s engineering organization, briefly explaining each team and the various engineering roles, including:

・ Mobile engineer
・ Frontend engineer
・ Backend engineer
・ Infrastructure engineer
・ Security engineer
・ Site Reliability engineer
・ Quality Assurance engineer
・ Search Engine engineer
・ Data scientist
・ Machine learning engineer
・ Corporate IT engineer
・ Engineering Manager

I believe that the introduction of each engineering role at Mercari was very useful for our participants, since they could think about what kind of engineer they wanted to be in the future. We actually invited several engineers that work in different roles and had a mini round-table session with the participants. We set it up so the participants could join any online meeting room they wanted to and each meeting room had an engineer from a different field. In this way the participants were able to ask questions to our engineers about anything they want to know. For example, some were curious about how to become a backend engineer and what they needed to learn to get the role. Others just wanted to know more about life as a software engineer or the main topic our machine learning team is working on.

Before ending we made several important announcements, including the fact that we will be having future alumni activities. This is because we believe having a network is very important for career development. We would like the participants to remain closely connected to share useful information and knowledge for career development. We also shared information about several upcoming tech events. Finally we talked about their certifications of completion and explained how to add the certifications to their LinkedIn account profile.

In the summer of 2019, a few people were brainstorming at a table and were dreaming about this program. I still can’t believe that we got so many applications at the beginning, then met with a lot of great people during the interviews, invited all our amazing participants, and then finished the program successfully. I sincerely hope our training program was helpful for all of the participants and their new career challenges. Moreover, I very much look forward to meeting Build@Mercari alumni as software engineers in the future. Thank you very much!