DEV Community: M. Akbar Nugroho

✨ 6 website learning gems you should visit!

M. Akbar Nugroho — Sun, 09 Jun 2024 05:00:00 +0000

Introduction

So you're a software developer? OK that's great. You are able to create application and make 💸💸💸, but have you ever thought for long terms scenarios or do your really aware of it?

For five years career in software development, creating application is not about to get your job done or delivering the software for launching event. It isn't 🙅‍♂️.

If you are a good developer, you should aware to the post-development stage of your software...

🤨: Come on, wheres my "learning gems"?! The title is not about engineering post!

OK OK I know it's not about engineering post. Fine!

But...

Let's enhance our knowledge with these awesome learning materials! From how to architect you application, writing maintainable code, and even knowing how the CPU actually works!

Btw, let's kudos 🙇‍♂️ to all authors who made these every good learning materials!

Patterns.dev

Patterns.dev is created by Addy Osmani and Lydia Hallie to help you architect your website to the next level. Patterns.dev will help you to design, rendering, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks.

Putting the “You” in CPU

Next, we have the CPU Land!

Have you ever thought how CPU is actually works under the hood?

🤨: Why I should think of it if it's already works under the hood?

Ayo, bro. Come on, are you serious? You won't be replaced by AI, right?

That's why you should know how CPU execute your program!

Fortunately this website got you covered. Here you can learn how multiprocessing works, what system calls really are, how computers manage memory with hardware interrupts, and how Linux loads executables.

All thanks to Lexi Mattick who created this website!

Refactoring Guru

🤨: Argh, I don't want to touch this codebase. It's fragile!

Hey, your wrote this code two years ago...

🤨: Ah, sorry. I mean yeah... why you're not giving me some solutions, Akbar?

Me? no man, but Refactoring Guru can help you!

Alexander Shvets already built cool website to refactor your 💩 codebase. This website will change your perspective of how you can built something that maintainable for long-terms.

The Component Gallery

Confused about naming your UI components and how it should looks like? No worries, I often facing this issue. But luckily theres Iain Bean who created The Component Gallery website!

Here, we are not presented with pre-build UI components rather it gives you what components should looks like and what exactly that for.

Learn Git Brancing

I have a meme for you, go check it out...

But, it just meme unless you know how to use Git properly. If you don't, no worries. Just Learn Git Branching!

Peter Cottle created this website to help you learn Git interactively. You know, because it's easier to understand something if you can visualize it.

The Twelve-Factor App

And the last, The Twelve-Factor App!

You'll learn how to build SaaS or simply a service in microservice cluster. Here you are not learn about what technology used, rather the ideology or concept to make your apps portable and easy to deploy anywhere!

Let's say thanks to Adam Wiggins for his dedication.

Conclusion

Alright, now you already know. Don't give up and keep your learning spirit. In the end it's all just someone's writing, but what makes it valuable is when you apply it and it works.

If you have any suggestions, don't hesitate to write them in the comments section below!

See ya!

✨ 5 useful productivity apps for every developer!

M. Akbar Nugroho — Fri, 07 Jun 2024 05:00:00 +0000

Introduction

When we're working on a project, it's not only about writing and compiling code. You may take a note, schedule your meeting, or even make illustration for your technical documentation.

Hopefully, theres a tons of software which can help you to achieve those purpose and today I'll share you my 5 most productivity apps I use!

BTW, this is my personal recommendation. If you have valuable preference, don't hesitate to share with me! 😉

Notion

Alright! Please welcome, our first place. Notion!

Who don't know about Notion? All-in-one, feature rich note taking apps where you can do almost all note taking activity. From making simple note even more advanced one.

Notion allows you to organise your notes, documentation, timeline or even calendar. A perfect apps for you who wont use many apps to make something. Notion includes it in one place!

🤔: I use Linux, does it support for Linux?

Don't be worry you've covered. Even though Notion doesn't have official apps for Linux, but luckily there unofficial Notion distribution on Snapcraft. So, as long as you have Snap installed then you are ready to install Notion!

Excalidraw

So, you like drawing your idea? Clarify your argument by illustrate it? I think Excalidraw is perfect match for you!

I also use it for my daily, like this post below.

Slowed by Region

M. Akbar Nugroho ・ Jun 3 '24

#javascript #react #remix #vercel

Even better, Excalidraw also has many libraries that you can use for free!

Excalidraw Libraries

A directory of public libraries that you can easily add to Excalidraw.

libraries.excalidraw.com

🤔: I want to use it on my machine

Ofc you can! Excalidraw is open source project hosted on GitHub. You can clone and run it on your local machine or even your own server.

excalidraw / excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams

Excalidraw Editor | Blog | Documentation | Excalidraw+

An open source virtual hand-drawn style whiteboard.
Collaborative and end-to-end encrypted.

Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.

Features

The Excalidraw editor (npm package) supports:

💯 Free & open-source.
🎨 Infinite, canvas-based whiteboard.
✍️ Hand-drawn like style.
🌓 Dark mode.
🏗️ Customizable.
📷 Image support.
😀 Shape libraries support.
🌐 Localization (i18n) support.
🖼️ Export to PNG, SVG & clipboard.
💾 Open format - export drawings as an .excalidraw json file.
⚒️ Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
➡️ Arrow-binding & labeled arrows.
🔙 Undo / Redo.
🔍 Zoom and panning support.

Excalidraw.com

The app hosted at excalidraw.com is a minimal showcase of what you can build with Excalidraw. Its source code is part of this repository as well, and the app features:

📡 PWA support (works offline).
🤼 Real-time collaboration.
🔒 End-to-end…

View on GitHub

Postman

Postman is not only about HTTP Agent. It's more than that! Postman is collaboration platform that bridge back-end, front-end, and QA in one place.

It makes easy to document your APIs endpoint and share it to everyone. Postman also gives you ability to make API mock and much more. And the latest version of Postman is also supports gRPC 😍.

So, when your front-end or QA ask you about APIs endpoint. Don't be afraid. Just send them the Postman Collection and you can continue your work 😁.

Sublime Merge

My very loved Git GUI apps! Simple, lightweight, and very fast! No more working with CLI 😁

Sublime Merge offers you to use Git in a simple way. From commit, manage your branch, even cherry picking!

It's so powerful to work with Git, but very light. A perfect match for you who want minimalist, on point, and powerful Git GUI.

Habitica

Let's be honest, working is one of most boring activity we like (because it generates money for use hohoho). But, how about to gamify it? I think it's more fun, tho? If so, Habitica is the right choice!

Habitica let's you gamify your life like RPG game. You doing something, getting points, and receive reward!

It's better than doing something, finish it, and go to sleep right? 😁

Summary

For me, those apps is very useful for my daily use. From taking notes, documenting project, collaboration activity, and even for fun.

I prefer minimal and not bloated apps in my computer which focus to all-in-one features. Because I want to make my self productive and make my work easy.

Sometimes, too much apps could distract and lead you to confusion. Choosing a right apps is tricky because everyone has their preferences. But, if I could, I want to suggest you to choose productivity apps that simple and has features that everyone easy to access.

If you work in personal, all choice is yours! But, if you work on team which requires you to collaborate each other, you can give it a try my list above!

Btw, at the end. Your goals is to make your job done. And all preferences is yours. If you have any suggestion don't hesitate to comment below!

Thanks for coming. See ya!

✨ 10 useful webdev insight & learning resources!

M. Akbar Nugroho — Wed, 05 Jun 2024 12:58:38 +0000

Introduction

In this post, I'll give you ten useful resources specific for web development.

All provided resources below are not definitely (step-by-step) tutorial for web dev. Instead, it's a guide to build secure, accessible and performant modern web application.

The main subjects of this post are:

Web accessibilty (WAI-ARIA)
Web APIs
Progressive Web Apps
Web Security
SEO (included Structured Data)
Design Patterns
Performant Measurement
Tools & Debugging Techniques
HTML & CSS Syntax References
And many more...

Based on the covered subjects, I hope you already learned the basic of web development. If not, don't worry. You can read these all for your reference tomorrow 😉.

Resources

WEB.DEV

Web.dev is a guidance from Chrome Developer Relations. They want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users.

This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.

What's included?

Blog. Latest news, updates, and stories for developers.
Learn. An industry expert has written each course, helped by members of the Chrome team.
Explore. Structured learning paths to discover everything you need to know about building for the modern web.
Case Studies. Learn why and how other developers have used the web to create amazing web experiences for their users.

MDN

MDN Web Docs is an open-source, collaborative project documenting Web platform technologies, including CSS, HTML, JavaScript, and Web APIs.

What's included?

References. The docs for web APIs, accessibility, security, performance, etc.
Guides. Step-by-step learn web development. The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable".

Chrome Developer

The Chrome's official site to help you build Extensions, publish on the Chrome Web Store, optimize your website, and more.

What's included?

Docs. The documentation of Chrome's tools & library, extension & web store, architecture, and infrastructure.
Blog. Latest update of Chrome and web technologies.
Articles. Latest research of Chrome's team and other insightful write.

Google Search Central

Google Search Central is here to help the right people view your content with resources to make your website discoverable to Google Search.

What's included?

SEO fundamentals.
Crawling and indexing.
Ranking and search appearance.
Site-specific guides.

CSS Tricks

CSS-Tricks is a renowned online platform dedicated to everything related to Cascading Style Sheets (CSS) and front-end web development. Established by Chris Coyier in 2007, CSS-Tricks has evolved into a comprehensive resource hub for web designers and developers seeking to enhance their skills, stay updated with the latest trends, and find solutions to their CSS-related queries.

What's included?

Articles and Tutorials. CSS-Tricks offers a plethora of articles and tutorials covering a wide range of topics, from basic CSS techniques to advanced front-end development concepts.
Code Snippets. Developers can find ready-to-use code examples for common UI patterns, layout designs, and CSS tricks, saving them time and effort in their projects.
Almanac. The CSS-Tricks Almanac serves as a comprehensive reference guide for CSS properties, selectors, functions, and other essential concepts.
News and Updates. CSS-Tricks keeps its audience informed about the latest trends, tools, and updates in the world of front-end development through regular news articles and curated content.

JavaScript Info

Your gateway to mastering the art of JavaScript programming! Dive into the world of JavaScript and unlock its full potential with our comprehensive resources and guidance.

What's included?

Exploring Tutorials. Embark on a journey through our extensive collection of tutorials, meticulously crafted to guide you through the intricacies of JavaScript programming.
Consulting the Reference Materials. Comprehensive reference materials to deepen your understanding of JavaScript syntax, methods, and objects.
Exploring ES6+ Features. Stay up-to-date with the latest advancements in JavaScript by exploring ES6+ features such as arrow functions, template literals, and destructuring assignments.

HTML Reference

Your ultimate guide to mastering HTML and harnessing its full potential in web development! HTMLReference.io is a comprehensive online resource dedicated to providing detailed documentation, examples, and best practices for HTML elements and attributes.

What's included?

Exploring HTML5 Features. Stay ahead of the curve with our coverage of HTML5 features and enhancements. From semantic elements like "header" and "footer" to multimedia elements like "video" and "audio".
Understanding Attributes. Unravel the mysteries of HTML attributes with our in-depth explanations and usage examples. From common attributes like "id" and "class" to more advanced attributes like "data-" and "aria-".
Quick Reference Guides. Access quick reference guides for common HTML tasks and scenarios, such as creating forms, embedding multimedia content, and structuring web pages.

Patterns

The brainchild of the legendary Addy Osmani, where cutting-edge design meets practical implementation in the world of web development! Patterns is a premier online resource dedicated to showcasing innovative design patterns, architectural principles, and best practices curated by Addy Osmani and his team of experts.

What's included?

Exploring Design Patterns. Delve into the world of design patterns with Patterns, where you'll discover a treasure trove of tried-and-tested solutions to common design challenges.
Architectural Principles. Unlock the secrets of scalable, maintainable architecture with our in-depth exploration of architectural principles.
Best Practices and Guidelines. Navigate the complexities of modern web development with confidence, armed with our collection of best practices and guidelines.

Can I use...

Your trusty companion in the ever-evolving landscape of web development compatibility! "Can I Use" is a renowned online tool that provides comprehensive information about web browser support for HTML, CSS, JavaScript features, and more.

What's included?

Browser Compatibility Made Easy. Navigating browser compatibility can be a daunting task, but fear not! "Can I Use" simplifies the process by offering clear and concise information about which web technologies are supported by various browsers.
Extensive Database of Features. Explore our extensive database of web features, including HTML elements, CSS properties, JavaScript APIs, and more.
Historical Data and Trends. Track the evolution of web browser support over time with our historical data and trends.

Figma Community

Where creativity knows no bounds and collaboration thrives! The Figma Community is an innovative platform that brings together designers, creators, and design enthusiasts from around the world to share, discover, and collaborate on design projects using Figma's powerful tools.

What's included:

Explore and Discover. Discover a treasure trove of design resources, including UI kits, icon sets, illustrations, and more, created by talented designers within the Figma Community.
Stay Inspired. Stay inspired and up-to-date with the latest design trends, techniques, and industry insights by following your favorite creators and joining design communities within Figma Community.
Contribute to Open Source. Contribute to the world of open-source design by sharing your design assets, components, and templates with the broader design community.

Summary

In conclusion, these ten web development resources offer a diverse range of tools and opportunities for designers and developers to enhance their skills, find inspiration, and collaborate with others in the industry.

From vibrant communities to comprehensive design libraries, these platforms empower creativity, foster collaboration, and provide invaluable insights for individuals at every stage of their web development journey.

Whether you're seeking to showcase your work, explore new techniques, or contribute to the global design community, these resources offer a wealth of knowledge and learning opportunities to help you succeed in the ever-evolving world of web development.

See ya!

Slowed by Region

M. Akbar Nugroho — Mon, 03 Jun 2024 08:25:46 +0000

TLDR;

I just publish my product Etalase that built with Remix and Hono. The problem comes from the Remix side which hosted on Vercel. For Hono, I use Deno as the runtime engine and hosted it on Deno Deploy combined with Supabase Database.

My Remix page is rendered ~500ms approximately when I back to previous page. For example, from home to products then back again to home. As my inspection, the problem comes from my Vercel region set to Washington while my Supabase and Deno are set to Singapore.

So, setting region for each Platform you use to same region should resolve this issue 😁.

Crab, why so slow?

I'm asking my self why my page get slower after adding some API calls into loader function. It approximately ~500ms. It's very slow for zero users (for now 😅). Is that because my API slow? nope, I tested it and it fast!

Does my loader not optimized yet? Yeah, it does, but this platform still zero users 😭. Such a beautiful realize...

Streaming tears from "I'm OK" promises

"OK FINE! Let's tune this" I said it to my self.

First, I use Promise.all() API to aggregate all promises together. I thought the loader slow because the promises running sequentially. After doing that, the result? it does not change anything 🙂.

"How about to streaming this?" I'm literally said it to my self.

Btw, Remix has streaming ability to stream your data into UI. As soon as your first chunk of data received by loader function it stream into the UI.

And after doing this 🥁🥁🥁...

It also does not change anything 🙂.

Let's drown draw

Enough for trying, let's analyzing.

First, I define the problem. it's SLOW. My expectation is FAST. I've tried two different method: Promise.all and Streaming and it fails.

Now let's make some scenario.

And focus to the problem.

I use fetch to connect with my API that returns promise and make it parallel using Promise.all(). Since fetch is using HTTP based communication this can have two main problems: slow request times or slow response times.

But, based on my scenario above I have no problem for Browser and Postman. So what happen? OK Let's figure out what actually make HTTP based communication get slowed specially on the network side because I know my connection is good and data being transferred is small.

Oh, wait. Latency? I though I've got some light of God 😭

You know? The actual response times for your server is time (ms) = latency + server request or response times. As I remember the major problem for latency is a distance between client and the server itself.

Triggered

Wait 🤨 (100x)...

"What the default region of my Vercel serverless function?", I said.

I immediately open my Vercel Functions settings to check the region. And you know, it's "Washington, D.C., USA ( iad1 )" by default.

📖 Here's the reference for you

Configuring Regions for Vercel Functions

Remix on Vercel

It took my three hours to debug. Thanks, btw 🙂.

Streaming tears (again, but really)

After realized that problem I change my serverless function to Singapore and apply it.

Also, I re-check all services are located to Singapore. And the final test is... "fast". I'm very happy about it and take some break to make a coffee.

To summarize, I give you some checklist if your Remix function slow even thought it isn't hosted on Vercel.

Use Promise.all(). If it can't help, use...
Remix Streaming. Or even worst...
Check your client-server latency issue.

See ya!

✨ 5 websites to get free programming e-book!

M. Akbar Nugroho — Wed, 22 Mar 2023 09:19:15 +0000

Introduction

This is five websites that provide e-book for learning programming language, framework, platform, etc for free.

The files are downloadable to PDF and licensed (mostly) under common creative, MIT and other public licenses.

Resources

📌 NGINX Library

NGINX Library offers you many free (included O'Relly) e-books that you can download on their official website.

Those books talk about cloud computing such as DevOps, DevSec, Kubernetes, Microservice, etc.

~~🔗 Access Link~~

📢 UPDATE!
Since NGINX already acquired by F5, the provided link above is unavailable somehow. Maybe it's taken down or on progress, but as a change I'll give you one website from Packt below :)

📌 Packt Free Learning

A new free programming tutorial book every day! Develop new tech skills and knowledge with Packt Publishing's daily free learning giveaway.

🔗 Access link

📌 Programming Notes for Professionals

These books are not a tutorial ebook, but it's kinda note for experienced developer about tools and programming language.

Some of their books are JavaScript, Kotlin, React, etc.

🔗 Access Link

📌 Ebook Foundation

Free Programming Books is a list of over 4,000 free programming books, 2,000 free courses and many other free programming resources, maintained collaboratively as a repository on Github. With lists in 43 spoken languages, it has helped countless programmers around the world acquire and improve their programming abilities.

🔗 Access Link

📌 Free Computer Books

This site is a directory of Hyperlinks to free ebooks, tutorials, and lecture notes, etc, all over the world. It is basically a free service to the communities with the focus on Information Technologies, Computer Science, Mathematics, etc.

Therefore, all the items (books, lecture notes, etc.) listed in this site are just Hyperlinks to other web pages all over the world (same as search results in Google). That includes, but not limited to, ebooks, lecture notes, and tutorials, etc.

🔗 Access Link

📌 SoftUni Free Books

This website offers basics programming language like Java, Python, JavaScript, etc.

🔗 Access Link

And that's it. I hope it help you. Thanks for reading!

The new React docs

M. Akbar Nugroho — Fri, 17 Mar 2023 16:38:20 +0000

Congratulations for all React team! 🎉

// Detect dark theme var iframe = document.getElementById('tweet-1636441676506906626-669'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1636441676506906626&theme=dark" }

Today, the new React homepage and documentation just released and I'm very happy about it. It's a long journey story.

This post will tell you about the updates and guide you through the website.

Are you ready?

I'm very excited about this. Let's go! 😁

The New Domain

The new documentation is moved to react.dev. Don't worry about the old one. We can still access it from legacy.reactjs.org.

If you previously put the old website into your post or article, it will redirect the link to the new site to void breaking changes.

The New Navbar

The new navbar looks content-first now. Long searchbar is the first thing you should see. And you are free to search anything you want.

The opened modal is much larger. Gives you better experience compared to the previous version.

Guest what the best part? Yes, The theme switch!

But, the language menu is missing now... I think it's on progress? 🤷‍♂️. No worries...

And the GitHub link redirects you to the release page instead of the README one.

The Learn Section

This is the most highlighted part. I'm very happy for this updates.

I was following the React community since 2019. Many of my friends and other people struggle reading the docs because it's not a beginner friendly and feels very technical 😅.

The React team heard those voices. They restructured the Quick Start and transform it. Entirely!

Now, we have more example codes...

...and sandbox to play!

The choice of words is also very easy to understand. If you read the Quick Start from start 'til the end, you should feeling it guides you step-by-step.

Plus...

...more illustration to help you understand better! 😍

If you need more practical way for learning React, you can go to Tutorial: Tic-Tac-Toe. It will gives you many insights about how you can use React to build your UI.

This is a step-by-step and detailed tutorial. Sandbox, illustration, and codes is provided. Awesome! 😁

For you, if you want to explore more about React, you can read Describing the UI, Adding Interactivity, Managing State, and Escape Hatches topics.

React team is also adding difficulty badge to give you more attention to the topic.

The Reference Section

This sections contains all of React built-in APIs. The React team seems to put a lot of effort into this part 😅.

How come? Each API is explained in great detail and provides good and bad ways to use them.

This section expose APIs from react, react-dom. and the Legacy APIs.

Community & Blog Section

And the two last sections. People behind this and latest update.

Thousand claps 👏 for you guys that shipping this milestone! Catch them here.

And never miss any news from the React team...

Conclusion

@dan_abramov and friends (sorry guys I can't mention you one-by-one :3) have worked hard until this release. I follow Dan on Twitter and he really passionate about the docs.

The new docs is game changing. Focusing the content for all audience. More illustration, playground, use-cases, and better detailed explanation.

And the most important. Dark theme! 😅

I believe they won't stop here. Friendly and clear documentation is one of the most things React community wants.

See you guys on the next improvement 👋...

Polymorphic component

M. Akbar Nugroho — Thu, 09 Mar 2023 11:05:02 +0000

TL;DR

Polymorphic component is a React component that has ability to use other HTML element as the returned element.

// Example of polymorphic component
<Button as="a" href="...">
  About
</Button>

With this approach, it gives you a control to customize the returned element from a component.

This is one of UI component that implement polymorphic component.

mantinedev / mantine

A fully featured React components library

^{Special thanks to:}

Warp, built for coding with multiple AI agents
^{Available for macOS, Linux and Windows}

^{Special thanks to:}

Drag and Drop React Complex Form Builder Library
^{Build and customize complex React forms in minutes. Seamlessly integrate a no-code form designer for your end-users or your internal tools}

Mantine

Packages

@mantine/hooks – collection of 50+ hooks for state and UI management
@mantine/core – core components library – 100+ components
@mantine/form – forms management library
@mantine/charts – recharts based charts library
@mantine/notifications – a fully featured notifications system
@mantine/spotlight – Ctrl + K command center for your application
@mantine/code-highlight – code highlight built with highlight.js
@mantine/tiptap – a Tiptap based rich text editor
@mantine/dropzone – manages files drag 'n' drop to an area or entire screen
@mantine/carousel – Carousel component
@mantine/nprogress – navigation progress
@mantine/modals…

View on GitHub

Introduction

When building user interface, we often facing an issue where a component not flexible enough.

Let's say you have a component like this.

function Button({ children, ...props }) {
  return <button {...props}>{children}</button>;
}

You can use component above to create a beautiful button. Nothing wrong with that component. Until someday you want create a link with same style with the <button /> component.

Maybe you will use this approach.

<a href="...">
  <Button>To next page</Button>
</a>

Of course it should work, but the code doesn't look so fluent. Meaning to say. If you use HTML, you can write it like this:

// We assume <a /> using same styling with <button />
<a href="...">To next page</a>

Based on the problem above, polymorphic component offers you a solution like this:

<Button as="a" href="...">To next page</a>

See? You don't need to wrap the <Button /> component using <a /> because it's automatically convert the the returned element to <a />.

Building The Component

Now let's build the component and it's very easy. All you need is only React createElement API.

💡NOTE:
Read the createElement API documentation for more information.

We have this component from the previous section.

function Button({ children, ...props }) {
  return <button {...props}>{children}</button>;
}

From this normal component, we will refactor it to polymorphic component.

function Button({ children, as, ...props }) {
  return React.createElement(as || 'button', props, children);
}

Let me explain the code above.

- function Button({ children, ...props }) {
+ function Button({ children, as, ...props }) {
  return React.createElement(as || 'button', props, children);
}

Here we added as props. This props holds a value of what element will returned.

It's not a must to name it as. Some UI library name it element, component, or whatever you like.

function Button({ children, as, ...props }) {
- return <button {...props}>{children}</button>;
+ return React.createElement(as || 'button', props, children);
}

We also changed the JSX to createElement API to give us more control when creating the component.

If you not familiar. Actually when you use JSX, under the hood it will transform your code to createElement.

By using the createElement API, we are able to conditionally create a component. That's why when you are not passing a value into the as props, the default element of <Button /> component is <buttton />.

And that's it... You have created a polymorphic component.

Conclusion

Polymorphic component may sounds very fancy and difficult, but it's not.

The term of polymorphic is a general term in computer science. You can read about it here.

One of my favorite backend framework, Laravel, is also has a feature called polymorphic relationships which use this term.

In React world, polymorphic component refers to an ability of a component that can returns different element with a same style without removing the default functionality.

It's really help when you facing a problem where you want to use other HTML with a same style.

I hope it gives you something. Thanks for reading :)

Simplify state with reducer

M. Akbar Nugroho — Wed, 08 Mar 2023 08:48:18 +0000

TL;DR

React state is good to store a reactive data. When the data changes, the UI will re-render and shwoing the latest update.

Complex UI also need more than one state. Possibly more than three.

To simplify manage the state, instead of updating the state one by one using its setter function, it's better to put all states in one place and update it according to event occured using dispatch() function.

// Example of end result

// From this
setLoading(true);
setVisible(true);
setStatus('error');

// To this
dispatch({ type: 'loading_started' });
dispatch({ type: 'status_changed', payload: 'success' });
dispatch({ type: 'visible_toggled' });

React reducer API

Introduction

We love state because it makes our apps interactive with less of code, but managing lots of state can be tricky.

Imagine we have a form component. It's very common case that a form can have mutiple state inside of it. For example, a form may have states for loading, status, form submit, etc.

The reason why we do this because we want to tell the users what happen to the current process.

With so many states it is a good advice if you put all states inside one place. A large, maintainable and consistent shape.

And now, we are going to explore one of built-in React API to create our own shape to simplify managing the states.

The Distraction

A form commonly use an alert component to inform the users that their data is successfully processed or not.

An alert component appears with different style according to the status state.

...and your code basically do something like this:

setStatus('success');

Theres nothing wrong with that code above. But, could you imagine managing many states inside a component? BTW, let's add more complexity to the UI.

Here's what the changes does. When user clicks the submit button, the button text change to "Loading...". Indicating that the data is being processed. The button is disabled to prevent user clicks multiple times until the process done.

So far we have two states. The status and loading. Can you spot the "distraction"? I think not yet.

Some particular apps using an overlay to display the form to minimize the page transition which will improve UX. The form should appear when user click a "trigger" and can be closed.

Now if we combining all states we should have status, loading and visible.

Let's assume we have declared those states inside our component and to change the value for each state, you use the setter function.

setVisible(true);
setLoading(true);
setStatus('warning');

As your UI getting more complex, you will have more states. More states meaning more setter functions and that's the first distraction.

With so many setter functions, the behaviour of consistency to update the state a little bit lost because to update a state you need a specific setter function.

If using multiple setter function in a single component isn't make you distracted, let's take a look to maintainability.

Imagine you develop a text editor for eCommerce website. So the seller can format the description part of a product to provide better information.

Example of simple text editor

From image above we possibly have four states inside the text editor. Which is:

formatter
mode
showOptions
letterCount

Although this is very simple text editor, you need to extract the UI into components based on its functionality and this is the problem come from.

// Just example :)
function TextEditor() {
  return (
    <div>
      <Formatter />
      <ModeSwitch />
      <Options />
      <ContentBody >
      <LetterCount />
    </div>
  );
}

Some of components need sharing states to act normally. For example the <Formatter /> may use the mode state because the formatter appear based on what current mode is being used. If user switch to Markdown, the formatter should disappear and vice versa.

The question is how do we share the states through all components?

The answer is very simple. Yes, using the Context. But, how? Like this?

function TextEditor() {
  // state declarations here

  return (
    <div>
      <TextEditorProvider
        formatter={formatter}
        mode={mode}
        showOptions={showOptions}
        letterCount={letterCount}
      >
        <Formatter />
        <ModeSwitch />
        <Options />
        <ContentBody >
        <LetterCount />
      </TextEditorProvider>
    </div>
  );
}

And inside the <Formatter /> component, use the mode state.

function Formatter() {
  const state = useContext(TextEditorContext);

  const [mode] = state.mode;

  return mode === 'editor' <div /> : null;
}

Another problem is the props of <TextEditorProvider /> grow exponentially as you add more state to the <TextEditor /> component.

So, do we have better solution? Well, of course, yes.

The Flux Architecture

We are not going to discuss Flux as a whole because it's a huge topic. What we're gonna do is to getting know about the main idea of Flux Architecture.

Flux Architecture or Flux is a pattern to manage states that live inside your component.

It's not a framework, but something like idealogy similar to MVC pattern. Even though it has minimal library to simplify our work.

Flux has four main parts:

Dispatcher
Stores
Actions
Views

https://facebook.github.io/flux/docs/in-depth-overview

Dispatcher

A dispatcher is a central place to updating the state. It is similar with setter function of React state.

const [state, setState] = useState();

// This is the dispatcher.
setState();

Note:

That code above is not the actual flux dispatcher.

Stores

A store is what holds the data of an application. So, instead of expose the data publicly, it's wrap the data in the store and perform operation inside it (via dispatcher).

You can see here for an example.

Actions

An action is a simple object that describe of what condition or event that being occurred. Action is used by dispatcher to determine what operation needs to be performed.

const MODE_SWITCHED_TO_MARKDOWN = {
  type: 'mode-switched',
  payload: 'markdown'
};

const MODE_SWITCHED_TO_EDITOR = {
  type: 'mode-switched',
  payload: 'editor'
};

// Dispatch an action
dispatcher.dispatch(MODE_SWITCHED_TO_MARKDOWN);

If an action need to pass a data or you want the action dynamic, you can use Action Creator. Action Creator is a simple function that produce an action.

const switchMode = (mode) => ({ type: 'mode_switched', payload: mode })

dispatcher.dispatch(switchMode('html'));

We have to remember that the most important part is type because we need this information to identify what operation should be performed.

The why Flux pattern can provide a better solution rather than raw React state because with Flux we can do many things. Not only holds a data.

Separation of concerns
Easier Debugging
Code predictability

The list above is some of Flux benefits.

Views

Nothing special with views. Views is component you made that may use the store or dispatch an action.

// Example of component that dispatch an action
function ModeSwitch() {
  return <Switcher
    onSwitch={() => {
      dispatcher.dispatch(MODE_SWITCHED_TO_EDITOR);
    }}
  />
}

See? Now it looks maintainable and consistent because we don't need to use specific setter function for each state.

You might be feel this approach little bit confused because I only show the main idea and use part of the code. But, once you got the main idea I ensure you will love this approach.

And the reason why I only show the main idea because Flux is currently in maintenance mode, but the idea still live and adopted by React.useReducer and Redux.

To get more information about Flux, go to their official website here.

Combining Context And Flux

Flux by defult is shareable between all views. That means we don't need to pass the Flux data into the Context.

Since Flux is in maintenance mode, it's not good practice to use Flux anymore. But, follow the main idea is a good deal, tho.

Note:
The maintenance mode is refers to Flux library not the main idea.

Is it possible to implement the Flux idea and share it between components through Context? The answer is yes.

Let's implement the Context first.

// text-editor-context.jsx
import React from 'react';

const TextEditorContext = React.createContext({});

export const TextEditorProvider = (props) => {
  <TextEditorContext.Provider value={{ store: props.store, dispatch: props.dispatch }}>
    {props.children}
  </TextEditorContext.Provider>
};

export default TextEditorContext;

The Context role is act like a bridge that connects all components to consume shareable state. Just it.

So, how implement the Flux? since the library itself is not continued by the maintainer.

Therefore, please welcome...

React.useReducer

What is React.useReducer? Well, because you already know about Flux. It is simplified Flux without shareable ability. Therefore, we use Context to make it shareable.

React.useReducer or simplified called reducer is slightly different compared to Flux.

Flux is require you to create a class that extends ReduceStore from the Flux library. While React.useReducer is a hook and takes two arguments to operates. The reducer and inititalState.

Note:
Read more about React.useState here.

With React.useState we can create a Flux-like state and should answer the question from the previous section.

// Example of reducer.
const initialState = {
  formatter: null,
  mode: 'editor',
  showOptions: false,
  letterCount: 0,
};

// Actions
export const switchMode = (mode) => {
  return {
    type: 'mode-switched', 
    payload: mode,
  };
};
// Rest of actions...

const reducer = (state, action) => {
  switch (action.type) {
    case 'mode-switched':
      return { ...state, mode: action.payload }
    case 'formatter-changed':
      return { ...state, formatter: action.payload };
    case 'options-toggled':
      return { ...state, showOptions: !state.showOptions };
    case 'letter-count-increased':
      return { ...state, letterCount: state.letterCount + 1};
    case 'letter-count-decreased':
      return { ...state, letterCount: state.letterCount - 1};
    default:
      throw new TypeError('Unidentified Type Given.');
  }
}

function TextEditor() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <TextEditorProvider state={state} dispatch={dispatch}>
        <Formatter />
        <ModeSwitch />
        <Options />
        <ContentBody >
        <LetterCount />
      </TextEditorProvider>
    </div>
  );
}

And now all components wrapped inside <TextEditorProvider /> should be able to access the state object and dispatch API.

The Final Result

After all, we are going to combine all solutions.

The inconsistency problem has been solved from code above. Theres no specific setter function. Theres only dispatch() function to update specified state.

The maintainability problem is also solved because if you want add new feature or states, you are not polluting the <TextEditorProvider />.

Instead of adding props, you just need to update the initialState and adding some actions or action creators.

And now you can use the states across all components...

function ModeSwitch() {
  const { dispatch } = useContext(TextEditorContext);

  return <Switcher
    onSwitch={() => {
      dispatch(switchMode('markdown'));
    }}
  />
}

// Theres no need to destruct the array :)
function Formatter() {
  const { state } = useContext(TextEditorContext);

  return state.mode === 'editor' <div /> : null;
}

You can even make the context simpler using a custom hook.

const useStore = () => {
  const store = useContext(TextEditorContext);

  return store;
};

// Use it like this
const { state, dispatch } = useStore();

Conclusion

Managing state can be tricky for complex application. Using combination of state and context is good, but we have better solution by using reducer.

Reducer is ensure us to update the state only using the dispatch() API. Minimizing distraction when using setter function, improve maintainability and consistency.

The Flux pattern is every useful for large application. Separation of concern, easy to debug and predictability. All of those features are needed by long-runnung application.

Luckly, reducer is already implement this pattern. Even though with simplification, but it still worth.

By combining context and reducer, you got Flux with simpler approach. Awesome!

FIY, one of top library that use Flux idea is Redux. And this is my favorite React state management.

Test React component that fetching data

M. Akbar Nugroho — Sat, 04 Mar 2023 14:18:59 +0000

TL;DR

We are going to use Mock Service Worker to fake the API. So, instead directly calling the API or mock the window.fetch it's better to mock the server behaviour.

It gives us a sandbox to play with the API server without polluting the window.fetch and no need to setup test API server for testing purpose.

Thanks to Artem Zakharchenko that has made a useful tools.

Introduction

You have created a beautiful Feed feature on your site and now you want to test that feature.

Your code is look like this

import React from 'react';

function Feed() {
  const [feeds, setFeeds] = React.useState([]);

  React.useEffect(() => {
    const ctl = new AbortController();

    fetch('https://api.domain.com/feeds')
      .then(res => res.json())
      .then(res => setFeeds(res.data))
      .catch(() => {
        // Log the error
      });

    return cleanup() {
      ctl.abort();
    };
  }, [])

  return (
    <ul>
      {feeds.map(feed => (
        <li>{feed.title}</li>
      ))}
    </ul>
  );
}

Though, it's really simple frature where you want to show users feed to the UI.

Somehow you confused about how to test the feature because you "must" fetch the feeds data from the API, but since this is a test you won't it calls directly to the API.

The Journey

Now you are searching possible solutions on the Internet. Because you use React and of course use Jest and testing-library (it is default setup from CRA), someone suggest you to mock the window.fetch object.

You intersted and put the solution in your test like this

// Import all dependencies... 

const MOCK_FEEDS = [/** Feed objects here */];

beforeAll(() => {
  jest.spyOn(window, 'fetch');
});

describe('Feed Feature Test', () => {
  it('should shows users feed', () => {
    window.fetch.mockResolvedValueOnce({
      ok: true,
      json: async () => ({ data: MOCK_FEEDS }),
    })
    // Your testing goes here... 
  });
});

You test the code and it looks green (meaning your test is pass) and you happy with that.

Tomorrow has come. You forgot about the "empty state" UI for Feed feature and today you made it.

Because the empty state UI need en error HTTP NOT FOUND, you need to refactor the test.

// Import all dependencies... 

const MOCK_FEEDS = [/** Feed objects here */];
const MOCK_FEEDS_NOT_FOUND = [];

beforeAll(() => {
  jest.spyOn(window, 'fetch');
});

beforeEach(() => {
  jest.restoreAllMocks()
});

describe('Feed Feature Test', () => {
  it('should shows empty state UI when feeds not found', () => {
    window.fetch.mockResolvedValueOnce({
      ok: false,
      status: 404,
      json: async () => ({ data: MOCK_FEEDS_NOT_FOUND }),
    })
    // Your testing goes here... 
  });

  it('should shows users feed', () => {
    window.fetch.mockResolvedValueOnce({
      ok: false,
      json: async () => ({ data: MOCK_FEEDS }),
    })
    // Your testing goes here... 
  });
});

Your test is passes, and you happy again.

The next morning, you received calls from project manager. He want you to add a "like (❤️)" button and you do it.

From this task, you have to update the feature to fetch two API endpoints. First you must use the GET /feeds and then POST /feeds/{id}/like to perform "like this feed".

After adding some codes, you refactor the test again, but realise that the mocked fetch doesn't care of the URL. What ever API endpoint you hit, it always returns the same response and potential a bugs on the future.

The test now is look like this

// Import all dependencies... 

const MOCK_FEEDS = [/** Feed objects here */];
const MOCK_FEEDS_NOT_FOUND = [];

beforeAll(() => {
  jest.spyOn(window, 'fetch');
});

beforeEach(() => {
  window.fetch.mockImplementation(async (url, config) => {
    switch (url) {
      case '/feeds':
        return {
          ok: true,
          json: async () => MOCK_FEEDS,
        };
      case '/feeds/1/like':
        return {
          ok: true,
          json: async () => ({ liked: true })
        };
      default:
        throw new Error(`Unhandled request: ${url}`);
    }
  });
});

describe('Feed Feature Test', () => {
  it('should shows empty state UI when feeds not found', () => {
    // Your testing goes here... 
  });

  it('should shows users feed', () => {
    // Your testing goes here... 
  });

  it('should able to like the feed', () => {
    // Your testing goes here...
  })
});

The tests are passes except the first one. You asking "why?" then realise there is no request handler for GET /feeds with 404 http status.

https://id.pinterest.com/pin/784259722590566564/

The Solution

Luckly, there is a tool called Mock Service Worker. It is a mocking tool for API and live in the network level.

Simply imagine that you can mock your API server and use it inside your test without makes you headache.

And the interesting part of this are:

Support Rest API and GraphQL
Support Node and Browser (meaning you can use it with Express, etc)
And many more...

Enough for explaining, let's install the requirement and refactor the tests.

First, install the msw.

npm i -D msw

To use the MSW, you need to make request handlers with specific HTTP method and URL. So, it gives you an ability to make GET 200 /feeds and GET 404 /feeds. It also support URL parameter like this /feeds/:feedId/like.

Now update the test like this...

// Import all dependencies... 
import { rest } from 'msw';
import { setupServer } from 'msw/node';

const MOCK_FEEDS = [/** Feed objects here */];
const MOCK_FEEDS_NOT_FOUND = [];

const url = (path) => `https://api.domain.com/feeds/${path}`;

const defaultHandlers = [
  rest.get(url(path), (req, res, ctx) => {
    return res(ctx.json(MOCK_FEEDS));
  }),
  rest.get(url(path), () => {
    return res(
      ctx.status(404),
      ctx.json(MOCK_FEEDS_NOT_FOUND),
    );
  })
];

const server = setupServer(...defaultHandlers);

describe('Feed Feature Test', () => {
  beforeAll(() => {
    server.listen();
  });

  afterEach(() => {
    server.resetHandlers();
  });

  afterAll(() => {
    server.close();
  });

  it('should shows empty state UI when feeds not found', () => {
    // Your testing goes here... 
  });

  it('should shows users feed', () => {
    // Your testing goes here... 
  });

  it('should able to like the feed', () => {
    // Adds the "POST /feeds/:feedId/like" request handler as a part of this test.
    server.use(
      rest.post(url('feeds/:feedId/like'), (req, rest, ctx) => {
        return res(
          ctx.json({ liked: true }),
        );
      }),
    );
    // Your testing goes here...
  })
});

Boom! your tests are passes. Not only the tests are passes it also provide better DX because you can easily create powerful URL routing.

You can also split the handlers into another file to prevent writing the handlers repeatedly. Making it reusable across all tests.

Not only provide better DX, MSW also offers you HTTP Cookie and other HTTP features. Awesome!

Conclusion

Mocking (and testing) HTTP request is one of challenging part, but MSW comes with powerful feature, cross-platform and use simple approach to tackle this problem.

MSW provide native-like approach by intercepting the network and returns the handlers we made instead of the real one. Prevent you to pollute the window.fetch by mocking it and potentially caused bugs.

mswjs / msw

Industry standard API mocking for JavaScript.

Mock Service Worker

Industry standard API mocking for JavaScript.

Join our Discord server

Features

Seamless. A dedicated layer of requests interception at your disposal. Keep your application's code and tests unaware of whether something is mocked or not.
Deviation-free. Request the same production resources and test the actual behavior of your app. Augment an existing API, or design it as you go when there is none.
Familiar & Powerful. Use Express-like routing syntax to intercept requests. Use parameters, wildcards, and regular expressions to match requests, and respond with necessary status codes, headers, cookies, delays, or completely custom resolvers.

"I found MSW and was thrilled that not only could I still see the mocked responses in my DevTools, but that the mocks didn't have to be written in a Service Worker and could instead live alongside the rest of my app. This made it silly easy…

View on GitHub

Refs is more than enough

M. Akbar Nugroho — Mon, 20 Feb 2023 20:13:14 +0000

This story started when I learning React.js for the first time. Where I see a lot of influencers overused the React.useState or generally speaking, a React.js state.

Let's be honest, we ever put a React state on every HTML input we have. When it has two inputs, no problem occur.

Sometime, your PM tells you to add a new feature and guest what? You add more and more state. Leading your application slow because of unnecessary re-render.

And now, you confuse why the application so slow even crashed on older browser.

...or maybe, Refs is the answer you looking for?

State: The Sweat Part

No doubt. React state helps us when dealing with interactive UI. For example you have a filter feature. You can filter your data by date, category, etc and display the filtered data.

Normally, your code looks like this.

const Filter = () => {
  const [filter, setFilter] = useState(null);

  const fetchDataWithFilter = (e) => {
    setFilter(e.target.value);

    /** Fetching data... */
  }; 

  return (
    <div>
      <p>Filter by: {filter || 'none'}</p>
      <select onChange={fetchDataWithFilter(filter)}>
        <option value="monthly">Monthly<option>
        <option value="cluster">Cluster</option>
      </select>
      {/** data display goes here... */}
    </div>
  );
}

As the result, you have beautiful and interactive filter feature.

At this point, theres no thing wrong with this approach. But, what happens when you have a case like managing values inside a form?.

State: The Sour Part

When you have a case like product entry form, normally you have >= 5 input fields. If you use React state for each input field to listen for value changes it's not good because your form will re-renders many times.

Let's imagine your client types 5 (average) letters for each input field and the form should have 5 (key hits) * 5 (input fields) = 25 (re-renders).

const ProductEntry = () => {
    /** States declarations... */

    return (
      <form>
        <input name="name" onKeyUp={e => setName(e.target.value)} />
        <input name="price" onKeyUp={e => setPrice(e.target.value)} />
        <input name="stocks" onKeyUp={e => setStocks(e.target.value)} />
        {/** Rest of input fields... */}
      </form>
    );
};

The benefit is you always got uptodate values where you can validate the values on the fly. But, you will have performance worst.

Refs: The Healthy Sweat

Instead of putting states for each input fields, you can use ref for getting the values without causing re-renders.

const ProductEntry = () => {
    /** Refs declarations... */

    return (
      <form>
        <input name="name" ref={inputNameRef} />
        <input name="price" ref={inputPriceRef} />
        <input name="stocks" ref={inputStocksRef} />
        {/** Rest of input fields... */}
      </form>
    );
};

With this approach, no matter how much your client types in the input fields, React shouldn't re-renders the form.

The downside is you need to add extra step for process the values (validate, sanitize, etc).

We can use a pattern called observer to handle the downside. Instead of process the values on the fly, we process it when some event fired. Normally when the form is being submitted.

const ProductEntry = () => {
    /** Refs declarations... */

    const submit = () => {
      // 1. Collect all values
      // 2. Validate
      // 3. Sanitize
      // 4. Perform HTTP request
    };

    return (
      <form>
        <input name="name" ref={inputNameRef} />
        <input name="price" ref={inputPriceRef} />
        <input name="stocks" ref={inputStocksRef} />
        {/** Rest of input fields... */}
        <button onClick={submit}>Save Product</button>
      </form>
    );
};

So, before the button is clicked, no actions is running and less of re-renders.

Objectives

Use state wisely

State makes our app interactive and it's awesome. When dealing with large app, you should pay attention of every state change.

Too many re-renders is not good for you app. Except you isolate it, so others parts not affected.

Use refs with observer pattern

It sounds every technical, but actually it's very simple concept. Just run your functions when an event fired.

Button clicked -> run submit() function.
Dropdown changed -> run fetchDataWithFilter() function.

Inside those functions, you can access your refs and process it as usual.

Use form validation library

Don't so diligent. You shouldn't to manually validate your form. Use a correct library instead. One of my recommendation is react-hook-form.

It implement refs and observer pattern. So don't be worry of unnecessary re-renders. And also I have wrote a guide how to use it :).

Form validation with react-hook-form

M. Akbar Nugroho ・ Aug 14 '21

#react

👋 Thanks for reading!

Dockerize Production React.js

M. Akbar Nugroho — Fri, 07 Oct 2022 19:15:49 +0000

With the popularity of cloud computing, containerization is a common technique used for mid to large scale project because it gives us isolated, scalable and easy way to deploy our application.

Today we are going to learn and create a production-ready docker image for React.js application. I really exited with this one so, let's start it out 😼.

Requirement

First, ensure Docker is installed on your machine. If you haven't please install it and come here again.

docker -v

Then, ensure Node.js is also installed on your machine. We need this to bootstrap our React.js application.

node -v

Initialize a Project

Theres so many ways to intializing React.js application. Either manually, pre-built template or front-end tools.

In this article we are going to use front-end tool called Vite because it's fast and configurable.

HINT

You may use Create React App (CRA) to intialize your application. It's also good and developed by Facebook Open Source too.

Open your terminal and type the following command.

npm create vite@latest docker-production-react

A prompt will appear. Just select React and JavaScript.

Now move to folder docker-production-react and run the following command.

npm i

HINT

npm i is just aliased command for npm install.

To ensure the initialize process works fine, let's start the local server.

npm run dev

Open with your browser http://localhost:5173 and you should see something like this.

Create Custom Docker Image

In this article, we'll using a technique called multi-stage build. Our goals is to separate the build process of React.js application itself and the web server (to serve the website).

Setup For Build Process

First, inside docker-production-react create a Dockerfile file and follow snippet below.

Here, we are using 16.17.1-alpine3.16. I choose alpine linux because it's tiny so, it make build process faster.

FROM node:16.17.1-alpine3.16 as build
WORKDIR /usr/app
COPY . /usr/app
RUN npm ci
RUN npm run build

The snippet above tells Docker to pull (when hasn't pulled) or use pulled image from Docker Hub to use node:16.17.1-alpine3.16 as the base image for build stage, set the current directory to /usr/app, running npm ci and finally build the application using npm run build command.

Setup For Web Server

Because React.js application is a static files, we need a simple, yet performant we web server in order the user able to access the application. Therefor I choose Nginx to handle this job.

From the previous Dockerfile, follow this snippet.

FROM nginx:1.23.1-alpine
EXPOSE 80
COPY ./docker/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/app/dist /usr/share/nginx/html

Here we tell Docker to use nginx:1.23.1-alpine as the base image and exposing port 80 (default port Nginx), copy the configuration file and copy our bundled application.

HINT

Because Nginx act as a common web server and only serve our application, it's OK to not bind the configuration file at runtime.

For the Nginx configuration file, create default.conf file inside docker/nginx/conf.d.

mkdir -p docker/nginx/conf.d; touch docker/nginx/conf.d/default.conf

...and follow below snippet.

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

The configuration just serve our application, but you can customize it as your needs.

Here our final Dockerfile...

FROM node:16.17.1-alpine3.16 as build
WORKDIR /usr/app
COPY . /usr/app
RUN npm ci
RUN npm run build

FROM nginx:1.23.1-alpine
EXPOSE 80
COPY ./docker/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/app/dist /usr/share/nginx/html

.dockerignore

It's similar with .gitignore, but it's used when you build your Docker image.

touch .dockerignore

Put it inside .dockerignore

.git
.DS_Store
.env
node_modules

IMPORTANT

Never put sensitive information inside your Docker image. Exclude it using .dockerignore.

Build Phase

Execute this command to build our image.

docker build -t web:0.1.0 .

Ensure the image is available.

docker image ls

Testing

Let's verify our works.

docker run --rm --name web-1 -p 80:80 -d web:0.1.0

Now open http://localhost with your browser and you should see something like this.

Yeay! It's working...

Bonus: The Source Code

Find it here.

Also follow my latest experiment.

thexdev / devlabs

🧙‍♂️ Find my latest experiment here! 🪄

Welcome, the Alchemist! 🧙‍♂️

Note

🧙‍♂️ The Elder

Hohoho, are you lost son? This place is full of curiosity that never end. Don't go away too quick son! Take a look and pick freely as you want, hohoho~

View on GitHub

Basic Load Balancing With Docker, NGINX & PHP

M. Akbar Nugroho — Wed, 05 Oct 2022 11:21:42 +0000

This article is a basic knowledge of how to create a load balancer using docker and PHP as its services.

In real-world use cases, it is more complex than we think and I prefer you to choose a cloud provider then setup your load balancer over there.

But before you go, reading this article will help you to understand the mental model of load balancing and the purpose of that thing.

Let's start it out 😼

Introduction to Load Balancer

In computing, load balancing is the process of distributing a set of tasks over a set of resources (computing units), with the aim of making their overall processing more efficient. Load balancing can optimize the response time and avoid unevenly overloading some compute nodes while other compute nodes are left idle.

Wikipedia - Load Balancing (computing)

I know that fancy words are confusing, so let's simplify that definition.

A load balancing is a technique in computer field where you have two or more servers to handle the user requests.

To make this thing more concrete, let's imagine you have a delivery service. Your business can receives 100 packages to deliver in a day, but you only have one currier where its max capacity is handling 10 delivery in a day.

You realize that you need 10 days to deliver those packages. If one currier can handles 10 delivery in a day, by add 9 more curriers, your business can handles 100 delivery in a day.

In real-world case, the curriers are act as a server to handle high traffic website like marketplace, movie streaming, etc nearest at a same time.

This technique is aimed to distribute high traffic workload to two or more servers. So, everyone can be handled by the servers.

Big Picture of Our Goals

At the end of this article, we should be able to create and running one nginx service and two php services.

We will create and configure:

Custom nginx docker image
Custom php docker image
Custom docker network

Take a look at the following image for better understanding.

Task 1: Creating custom NGINX image

Let's start creating a custom nginx image using nginx:1.23.1-alpine as the base image.

First, create a directory called docker-basic-lb with a child proxy.

mkdir docker-basic-lb; mkdir docker-basic-lb/proxy;

Create a Dockerfile.

cd docker-basic-lb/proxy; touch Dockerfile;

Open the Dockerfile and put the codes below...

FROM nginx:1.23.1-alpine

RUN rm /etc/nginx/conf.d/default.conf

COPY ./default.conf /etc/nginx/conf.d/default.conf

Create nginx configuration file.

touch default.conf;

# docker-basic-lb/proxy/default.conf

upstream gateway {
  server service-1:8000;
  server service-2:8001;
}

server {
  location / {
    proxy_pass http://gateway;
  }
}

Here we create a custom nginx image and its configuration file. Inside the configuration file, we have two servers: service-1 and service-2 with their own port. Don't worry, we will create those services later...

IMPORTANT
In production, we should bind a directory to our custom nginx image for storing the configuration file.

It's important because when the configuration file changes we don't need to build the image over and over again.

But, to simplify this article let's put it on inside the image.

Task 2: Creating custom PHP docker image

Let's move to docker-basic-lb.

cd ../;

Create a directory inside docker-basic-lb called service.

mkdir service; cd service;

Inside the service directory, create a Dockerfile and put the following codes. We will use php:8.1-cli as the base image.

touch Dockerfile;

FROM php:8.1-cli

COPY . /usr/src/app

WORKDIR /usr/src/app

RUN chmod +x ./start.sh

CMD ["sh", "./start.sh"]

Create the start.sh scripts.

#!/bin/bash

set -e;

php -S 0.0.0.0:$PORT ./server.php;

Finally, create a file called server.php to returns a JSON data when user access our service.

<?php

header('Content-Type: application/json');

$message = sprintf(
    'Hello from service %s',
    getenv('SERVICE_ID')
);

echo json_encode(compact('message'));

IMPORTANT
In production, you should use something like php-fpm. But, to simplify this article we just using php built-in web server.

Task 3: Creating custom docker network

To be able to connect our things together, we need a docker network. Docker comes with some built-in networks, but we're going to create another one to isolate our services.

Create a network called docker-basic-lb-network.

docker network create docker-basic-lb-network;

Ensure the network is available.

docker network ls;

Connecting All Things Together

Build All Images

Move to docker-basic-lb/proxy and build the proxy image.

docker build -t proxy:0.1.0 .;

Now move to docker-basic-lb/service and build the service image.

docker build -t service:0.1.0 .;

Ensure the images are available.

docker image ls;

Running The container

We need to run the service container first because our proxy is depends to the services in order to running correctly.

docker run --name service-1 -e SERVICE_ID=1 -e PORT=8000 --network docker-basic-lb-network -d service:0.1.0;

docker run --name service-2 -e SERVICE_ID=2 -e PORT=8001 --network docker-basic-lb-network -d service:0.1.0;

Here we run two php service with the name of each service is service-1 and service-2.

Now let's run the proxy container.

docker run --name proxy-1 -p 80:80 --network docker-basic-lb-network -d proxy:0.1.0;

Testing

Open Postman or install it first when you don't have. Hit http://localhost and you should see something like these...

Congrats! Now we have created a load balancer for our services.

I hope it help and you can enjoy this article. See ya!

Bonus: The Source Code

Find it here.

Follow my latest experiment here!

thexdev / devlabs

🧙‍♂️ Find my latest experiment here! 🪄

Welcome, the Alchemist! 🧙‍♂️

Note

🧙‍♂️ The Elder

Hohoho, are you lost son? This place is full of curiosity that never end. Don't go away too quick son! Take a look and pick freely as you want, hohoho~

View on GitHub

DEV Community: M. Akbar Nugroho

✨ 6 website learning gems you should visit!

Introduction

Conclusion

✨ 5 useful productivity apps for every developer!

Introduction

Slowed by Region

M. Akbar Nugroho ・ Jun 3 '24

excalidraw / excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams

Excalidraw Editor | Blog | Documentation | Excalidraw+

An open source virtual hand-drawn style whiteboard. Collaborative and end-to-end encrypted.

Features

Excalidraw.com

Summary

✨ 10 useful webdev insight & learning resources!

Introduction

Resources

Summary

Slowed by Region

TLDR;

Crab, why so slow?

Streaming tears from "I'm OK" promises

Let's drown draw

Triggered

Streaming tears (again, but really)

✨ 5 websites to get free programming e-book!

Introduction

Resources

📌 NGINX Library

📌 Packt Free Learning

📌 Programming Notes for Professionals

📌 Ebook Foundation

📌 Free Computer Books

📌 SoftUni Free Books

The new React docs

The New Domain

The New Navbar

The Learn Section

The Reference Section

Community & Blog Section

Conclusion

Polymorphic component

TL;DR

mantinedev / mantine

A fully featured React components library

Mantine

Links

Packages

Introduction

Building The Component

Conclusion

Simplify state with reducer

TL;DR

Introduction

The Distraction

The Flux Architecture

Dispatcher

Stores

Actions

Views

Combining Context And Flux

React.useReducer

The Final Result

Conclusion

Test React component that fetching data

TL;DR

Introduction

The Journey

The Solution

Conclusion

mswjs / msw

Industry standard API mocking for JavaScript.

Mock Service Worker

Features

Refs is more than enough

State: The Sweat Part

State: The Sour Part

Refs: The Healthy Sweat

Objectives

An open source virtual hand-drawn style whiteboard.
Collaborative and end-to-end encrypted.