React Amsterdam Conference ’19 Recap: Q&A With Developer Philip Du

Welcome to the Advesa Spotlight series. We feature the talented individuals working hard behind the scenes at Advesa Digital. We highlight their stories, insights and tips insight and tips so that you can thrive in today’s competitive environment.

 

April of 2019, meant one thing for developers — React Amsterdam, a 3-day conference on all things React in the tech heart of Europe.

React is one of the most popular JavaScript libraries for building user interfaces, which is why our Front End Developer, Philip Du, was sent to attend. He and 1300 other React enthusiasts from all over the globe were ready to pick the brains of an array of senior developers.

The event took place at a former warehouse called ‘De Kromhouthal’ at the heart of the creative and bustling North Amsterdam area.

Phillip has vital insights he’s brought back to the Advesa team after learning from keynote speakers and participating in workshops. Some were held by leaders in the field, like renowned Programming Educator Kent C. Dodds.

Philip, thanks for joining this Q&A.

Related Q&A: Google Cloud Next Conference ’19 Recap: Q&A with CTO Chanh Doan

With a biomedical engineering degree, Phillip plays a critical role in Advesa’s software development projects and is well on his way in becoming Advesa’s senior full stack developer.

 

Tell us, what was the purpose of attending the React Amsterdam conference, and what did you make of it?

It made sense for me to attend the React Conference. Coming to Advesa on the development side for many projects, I was given the freedom to choose what language we could use, and I was most comfortable with React.

My main focus was the conference’s workshops, which I devoted the first half of my stay there participating in. I was excited because it meant I had the opportunity to learn from someone experienced and well-known in the industry. The last half of my time I spent listening to keynote speakers.

Overall, the conference taught me the importance of tackling tasks instantly and how to take a few steps back and analyze the whole scope of the project to see the bigger picture. It’s helped me a lot when planning how to build code.

 

How will you use your new knowledge?

We’re working on a CRM tool that’s designed to help E-commerce owners better manage their businesses.

Currently, a lot of business owners build a website with WordPress. They use the medium for all their processes, from managing content to shipping to labeling to inventory to exchanges to customer refunds. This means they need to install a lot of different tools and plugins. Our team’s goal is to create a platform where everything is more centralized, so owners don’t have to scour the web looking for different tools. It’s about convenience and efficiency.

For this project, React Amsterdam’s workshops taught me that I shouldn’t be afraid to try new things along with how to avoid classic beginner mistakes. For example, if I were creating an online submission form that required the input fields like email, name and so forth, I’d typically put in a format validation. This forces the user to type their responses in the correct email format. But things can get really complicated if I began managing the validation fields all by myself because I can’t cover all scenarios.

The workshops highlighted the fact that there are tools available that large companies approve of and use daily. Hearing that has given us the confidence to experiment with different tools that can aid in our projects.

Photo from React Amsterdam Facebook Group

Why is React your library of choice?

React represents the future, compared to the ‘old way’ of building a website that is composed of HTML, CSS and JavaScript.

HTML is your website skeleton, CSS brings the overall colors, borders, text font and colors alive. While JavaScript adds the interaction experience of web browsing. This is fine until you work on a project that’s of enormous scale because you’ll run into a lot of performance issues.

This old framework of working without React involves these steps. You land on the website, the server gives you a page and depending on how you interact with it, the server will shoot you the new age for you to navigate to. But this can lead to frustrating interactions if you click a button, and have a slow connection. As a result, you’re left waiting for 4 or 5 seconds for the new page load.

The modern framework with React gives you the whole app (website) from the beginning so that when you click a button, the content automatically changes instantly. You’re not waiting for the new page to load. That’s the central vision of React, and what makes it so enjoyable to use as a developer. It allows you to create your vision with fewer complications.

 

What other framework did you think about using?

When initially deciding what to use, there were other competitors to consider, like Angular or VUE (an open-source JavaScript framework) who provide the same functions but are built differently. When I compare, we know that both React.js and Vue.js have robust features and tools. Things like a Virtual DOM, JavaScript usage along with a reactive and component structure. But the ReactJS community is much bigger than Vue.js — it’s the most popular JavaScript library available.

Then, if we compare React to Angular, Angular by itself allows you to build an entire web application with Google controlling every single part of Angular. React gives the developer more control, as well as an open source community of contributors who all want to be involved in improving it. That’s the beauty of React. It has a rating system and is continuously being worked on by developers around the world. So, if there’s a security issue, it will immediately be flagged.

With everyone offering advice, you end up with a well-maintained package.

 

The conference debated the eternal question about how to get designers and developers speaking the same language. Why is this a constant struggle?

The primary battle is when designers come up with inferior wireframe concepts, or they’re limited by creativity.

Developers are bound by the rules of the programming language they use, which means, when looking at the design, they have to make a lot of choices. Do they want to keep using a specific design if it affects performance, or do they ask the designer to come up with another? Sometimes, a change in design needs to be applied across the whole platform, so that’s the struggle.

React Amsterdam provided guidance on free tools that the growing community helped create. Tools like building elements, a button, an input field, a title and so forth. This allows designers to ‘drag and drop’ elements to see the result in real time. By doing so, the designer is using what the developer has already built. This process makes things a lot more seamless as designers have more flexibility to change when working with developers.

 

Photo from senior web developer Arnold Hue

“React gives the developer more control, as well as an open source community of contributors who all want to be involved in improving it. That’s the beauty of React – it has a rating system and is constantly being worked on by people from around the world, so if there’s a security issue it will immediately be flagged.”

 

What are some lessons that other developers should adopt?

Firstly, don’t start coding the moment you have an idea. Think hard about what you are trying to achieve and what the end goal is. Second, code test first. Because of time constraints, developers usually skip this step because they always assume that their code will always work the way it should. Fundamentally you must make sure that the code works perfectly in every way. We don’t want to send broken code to users! Lastly, put comments in your code. Again, because of time constraints, developers don’t always do this step. But this is very important, particularly when your app becomes really big in size.

For example, if you build a module, and it passed every test, but 2 months later there’s an update in the design, you won’t understand how you structured the code when you come back to it, or what the reason is for the function to be there. You waste a lot of time backtracking. Comments should be there for yourself, and for others, when collaborating to understand what you’re trying to achieve. This is just a better experience whether or not you’re working alone or in teams.

 

Any final pieces of advice?

React is here to stay. But this shouldn’t limit or restrain you from learning new tools. Forget being fearful of learning new things, or believing that you have to master something before learning something else. Technology changes fast and every piece of technology (say, like a smartphone, for example) has a product life cycle.

Say, the smartphone – it catches on, there’s a surge in popularity, but then, it reaches its peak performance. Suddenly, someone or something sweeps in and does the same thing better, and that first product starts to decay. The industry changes too fast for you to stop learning!

 

Post by Thea Christie

Leave a Reply

Your email address will not be published. Required fields are marked *