Testing the new HTML writing style – Bratislava Angular – Medium

November 13th, 2017

• And third, when the component has a lot of inputs and outputs, it would have a few very long lines with these attributes.
• This violates the principles of clean code — some of the important parts of code are hidden near the end of very long lines (and as you scan the code, you mostly look to the beginning of lines), and the different parts are not clearly separated from each other, i. e. the…
• Git diff for changed lines👉 The closing should be on a separate lineHaving the on a separate line makes it super easy to add new attributes and reorder the existing ones.
• If instead, it was on the same line as the last attribute, it would be much harder to spot, and you would have to break the line before it to add a new attribute.
• This makes it very easy to move the attributes around, add new attributes, and delete them.Editing lines with Vim👉 The class attribute should always be firstThis rule is there only because the class attribute is so common.

So last month, Stanislav Kucharik joined our frontend team at Exponea. One of his first ideas was to change the way we write HTML templates. Read his article to learn about this new format, the rules…

@9chuckeles9: My second Medium post – Testing the new HTML writing style
#Angular #HTML

So last month, Stanislav Kucharik joined our frontend team at Exponea. One of his first ideas was to change the way we write HTML templates. Read his article to learn about this new format, the rules that apply to it, and the reasons why to use it. Here are my personal thoughts on the new format of HTML templates after using it for a while.BackgroundAt Exponea, we are using the ⚙️ Angular framework to power the frontend of our application. For a very long time, we have written the HTML templates of the components like this:There are a couple of problems with this approach to HTML templates. First, it’s hard to add new attributes to a component or an element. You have to find the closing and insert it before that. Sometimes the component has so many attributes already that the one you are trying to add is already there. You missed it because it’s hidden somewhere in the line with other attributes. Second, it really messes with the Git diff when you change attributes. Even when you add or remove a single input for a component, the whole line is modified and Git shows it like that. And third, when the component has a lot of inputs and outputs, it would have a few very long lines with these attributes. This violates the principles of clean code — some of the important parts of code are hidden near the end of very long lines (and as you scan the code

Testing the new HTML writing style – Bratislava Angular – Medium