As advised by Akpeti Belief, one of many three creators of lego-build.
Each software program mission goals to unravel an issue. Nonetheless, there are a number of issues one encounters whereas attempting to construct software program. Lego-build solves a kind of issues.
Constructing trendy front-end (internet or native) apps is troublesome. In an effort to cut back the complexity of our apps, we break up them into smaller components we frequently name parts. However bigger apps have extra than simply “parts”, they may very well be additional divided into pages, layouts, hooks, reducers, actions, atoms, molecules, organisms, utils, (I believe you get the purpose). This sort of code-splitting is useful, little doubt about that, however there’s nonetheless a whole lot of boilerplate code and routine duties that go into it.
Need to create only a small part? You must create about 3 or 4 recordsdata — the part file, a CSS file, an index file, and in some circumstances a check file. Now think about doing this manually about 10 totally different instances for a mission with 10 parts (which may even be thought-about a small mission!). It’s worse once you start including further libraries like Redux. Want a brand new state? Create a brand new file (reducer) and even two! (plus an motion). To somebody simply beginning out with front-end improvement, this drawback could seem trivial, however somebody who has constructed a number of apps understands how repetitive, boring and time consuming creating all these recordsdata which have the identical boilerplate code could be.
Think about how a lot time your crew may save if there was one thing that would automate all these boring duties. Think about how environment friendly you’d be whereas constructing your facet mission in the event you had one thing to carry out routine duties for you.
We’ve got that one thing.
Lego-build is a CLI software that helps you carry out all these boring duties with a single line. As an alternative of making 3 recordsdata manually when making your Nav part, automate it by merely operating:
lego-build part Nav
However lego-build does greater than assist you make front-end parts, instruments that do this exist already. Lego-build is much extra highly effective.
The philosphy
Whereas most ‘component-generating’ instruments see all components of your app as parts, lego-build is versatile. We see a front-end app as a constructing, made up of particular person blocks. These blocks may very well be varied issues (already listed firstly of the article) like parts, pages, layouts, React hooks, and so forth. They may very well be folders (like parts), and even single recordsdata (like a reducer).
The foremost attribute of a block although, is the presence of boilerplate code. When making customized hooks in React for example, you all the time import useState and return a worth (an array or object). Lego-build permits you simply configure your individual blocks, together with the boilerplate code or “template” to observe. It’s flexibility makes it to be helpful in any front-end framework. No different software comes near it when it comes to flexibility.
Extra particulars on configure lego-build to suit your workflow could be present in our concise and simple to grasp docs. You would additionally see how different builders are utilizing lego-build in our neighborhood web page.
However for now, learn on to be taught extra about why we made lego-build.
React was the primary trendy JavaScript library I realized, and I’ve by no means seemed again since I did. I’ve constructed a number of internet apps (and some native apps) with it. A few of these apps are small, with primary performance, few parts, and little state administration. Others are a bit extra complicated, with few parts too, however a whole lot of state and logic to handle. Others have a whole lot of parts (39 on this case, excluding pages and the admin app’s parts) and a good quantity of logic to hook up with a back-end API.
I loved utilizing React so much, however the quantity of boilerplate code concerned in constructing the bigger apps (particularly when utilizing Redux) was actually discouraging. When constructing full-stack apps, I take advantage of Laravel for creating my API. Laravel is an MVC framework, which implies there are three important blocks within the app — A mannequin, a view and a controller. Laravel comes with a CLI software known as the “Artisan” that you should utilize to create any of the three important blocks, and it additionally has a whole lot of useful instructions that make constructing your backend simpler and sooner. I desperately wanted an “Artisan” for React.
It was that want that gave start to lego-build.
A easy Google search will reveal that there are already a number of CLI instruments for simply creating React parts. We’ve already talked about that lego-build is much extra versatile than these instruments, however let’s speak extra about why such flexibility is necessary. Why did we make lego-build as a substitute of utilizing the present instruments?
In Laravel (model 9 no less than) each mannequin is saved within the apps/Fashionslisting. Controllers have their very own particular folder too, so do the views. This construction is identical for each Laravel developer. However React could be very totally different, it’s unopinionated by nature, that means that each developer buildings their mission otherwise. Some builders put all their parts in a src/parts listing, others use atomic design to separate their parts into atoms and molecules. Some builders use modular CSS, some use common CSS, and in React Native tasks there’s no CSS file.
The out there ‘component-generating’ instruments drive a developer to construction their app a selected approach. They don’t make provision for the varied architectural variations that exist. That’s why we made lego-build — A versatile software that bends to the need of the developer.
The flexibleness of the lego-build permits it for use in different libraries and frameworks other than React, although the concept was fashioned with React builders in thoughts.
