More and more often I see engineers who want to write a code, to resolve a problem, to fix a bug, to create a feature as fast as it is possible. The most important goal is to make your code operating and have to work as expected. From here we face some challenges how to into that code and hope without magic. support, maintain, add features My past and permanent projects which I work on are the long life projects. Engineers may come and go, a team can be changed, but the most important point here is motivation. When a newcomer joins a team and sees how messy, non-understandable, not-documented code they has two options here. Firstly, to accept and work with it and to resolve tasks because we have the end of a sprint. Secondly, to take under control, to face a challenge and try to bring a team to the better results. In order to avoid such situation in a team, lets see how we can discuss, brainstorm a feature example task and solve two main problems, make a feature to work and leave some docs for team members. Who wants to implement “Find your job” feature? Dialog in a team. Jeff, do you want to take a new feature? Sure! Which one, this easy one with three drop-downs named “Find your job”? Yes, “Find you job”. I will give you the requirements and please describe how you are going to organize your code. Remember, the requirements may be changed. John: Jeff: John: Requirements When an option from drop-down is selected should appear on the list, filtered by the selected option new jobs By default, 5 jobs should be on the list Click on “More” should provide another 5 jobs if not then hide the button So, Jeff, are you ready to discuss? Sure. Please see a flowchart John: Jeff: (it was created with help of js-code-to-svg-flowchart Bohdan Liashenko ) PROTOTYPE Good work Jeff. Just before you have shown me the flowchart, the requirements had changed and we know need to support different API’s for each request and the response data will be also changed. To be short, each request should have its parser. Ow, and I almost forget to say, we need to add two more drop-downs. No problem, I will add :) John: Jeff: This is a common behavior and approach to resolving a problem and it is fine. Although, you see that the problem might appear in future, don’t you? Yes, I do. You are right, for each drop-down listener and as many drop-downs we will have as many “if statements” you should add to MORE listener. a duplication, a complex logic So, let’s jump into and see how we can improve the code. Design Patterns Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. , Addy Osmani ~ Design Patterns Looks like perfectly fits our needs. The Command Pattern The Command pattern aims to encapsulate method invocation, requests or operations into a single object and gives us the ability to both parameterize and pass method calls around that can be executed at our discretion. In addition, it enables us to decouple objects invoking the action from the objects which implement them, giving us a greater degree of overall flexibility in swapping out concrete classes(objects). , Addy Osmani ~ Design Patterns The updated flowchart will look like that: PRODUCTION As you may see from the flowchart we are going to have one method which is going to get jobs. executeGetJobs(config) We only should pass a config inside. The config has properties and the method handles all logic which we need. getUrl, parser, optionValue, selectName executeGetJobs Let’s do a job done (custom elements) Run and check the repository. _command-pattern-in-web-components - Here you may find Custom Elements with GitHub Jobs API (express and cors)_github.com shystruk/command-pattern-in-web-components Before I started writing a code I was thinking which framework to use to get the faster result, as it usually happens. Angular or maybe React, Vue, oh damn no, lets do that in vanilla JS style with and keep the components approach. Custom Elements With , web developers can , beef-up existing HTML tags, or extend the components other developers have authored. The API is the foundation of . It brings a web standards-based way to create reusable components using nothing more than vanilla JS/HTML/CSS. The result is less code, modular code, and more reuse in our apps. Custom Elements create new HTML tags web components That is exactly what we need for our app. As I use , so may be an issue. Express and helped me to solve it as well: The GitHub Jobs API CORS cors Does not matter how many drop-downs you have the listener on change, which will look like that: As you may see in PRODUCTION flowchart we should have one method which will do all job. executeGetJobs It is simple to build a config. You need to understand what you have to have in the config for making a request and return to UI as a response. So, as you may see the config is flexible and you if you need to add more selects it is easy to do. Have a look: The last part is HTTP request which I like to call a I use ES6 modules (import/export) and they are singletons, the instance is created when the module is loaded. It is important to remember that when you are working with reusable user interface widgets (components), every object/class which has shareable data should return a new instance. resource. Do you ask me why? The answer is simple. Singleton initializes once, so if you have a component in two places they will use the same instance data. So, each component will be modified and share one object. In my case, the resource is not an exception. So, let’s get a new instance each time when the component is used: Finally, let’s see the resource main GET methods. As you may see sets all data which we need for the request (lastSelectName, lastOptionValue). That data will help us to build correct config. executeGetJobs getMoreJobs Conclusion Remember, that the best solution to any problem is to ask your team members for the help. Do not forget about design patterns, they make a code more readable, scalable and this is one of the most known solutions in software design, so everyone will understand what code does. I like how Web Components work and the way they are created. I keep working on it and soon will share my thoughts and show you an app based on Custom Elements. It is time to remember vanilla JS :) Thank you for reading. Suggestions, comments, thoughts are welcome :) ✌️ If you like this, clap, follow me on medium , twitter , github share with your friends

Are you going to write some code? Wait for a sec, I see a design pattern here.

Too Long; Didn't Read

People Mentioned

Companies Mentioned

@shystruk

RELATED STORIES