To be a professional developer is somewhat interesting as with a computer, we may reproduce things above using copy and paste. In web, we can use many tools to clone a repository and extend it then push it again to a new repository.
For example in my first project, I’ll use webpack to assembly angular with bootstrap to create a login page. My goal is to build a short script and a component tag that is reusable anywhere by simple import.
Webpack is responsible of building later the vendor package if I mix it with other components in one page. Using webpack will also allow me to add later react or jquery or vue.js components then bundle it in one minified script transportable and mainly for sellable plugins for CMS such as WordPress or Drupal or Prestashop.
So let’s sort things we must deal with :
HTML document linked to customizable Bootstrap SASS style
This document is the one who may change as we change site or page implementation. For page implementation, we’ll try not to change its design neither the name of the fields used to login to avoid duplicate the form for each page change. For worst case, make those parameters accessible from outside of the component through HTML attributes.
The HTML document contains Angular components
If we switch to vue.js, this document will be changed by replacing for exemple the ng- with v-
Script file containing custom angular components
This file is for angular only.
Script file to chain our project level component’s components
Inside this file, we’ll write things more clean by the use of object interconnection. This file is the minimum required file containing the component we develop and contains all the functionalities provided by this component.
Script file loading all the components for the page
This file will load each component and customization parameters. HTML document customization should be available from here to be changed. The path to the HTML will be transparent here :
import custom_style.scss component1 = new Component1(path_to_html1, config1) //the custom style overrides bootstrap's default by defining new values for its variables component1.render(data1) component2 = new Component2(path_to_html2, config2) //... component2.render(data2) .... componentN = new ComponentN(path_to_htmlN, configN) //... componentN.render(dataN)
The HTML document gathering all the components
I can opt for server side rendering here or just do the SEO-friendly way to write clean and light html text to show only the important and valuable content the page needs to show. If the page is for public use, I can also use LD+JSON representation of items.
The idea here is to make things clean and customizable, keeping the ability to speed up maintenance and debugging. We benefit also with the improvement of each components and reusability in growing projects.
Many library are open source and must keep aware of license type each of them are using.
If you intend to sell a component, MIT is good but there is the BSD which may not allow you to make money with.
Try as well to organize repository to a tree following both chronology and usage.