What my commit in Angular taught me

Today I will tell you how I got into Angular contributors. It turned out that this is not at all difficult and very exciting! The result is a drama with four acts and one moral. That's how it was.


I do frontend at Setronica . We live by Ecommerce-Driven-Development.


Our company has a 10-year history of front-end development. The code has accumulated a lot and different. With it, you can go through all five stages of adoption, but now is not about that. Now about what we generally had: historically, the frontend was written in the Grails framework. This is a Java-like MVC framework that was actually used for the SSR. JQuery added a bit of interactivity - just like in the good old days.


A few years later (apparently when the front-end developers stopped writing the frontend), we came to AngularJS. At that time, it was a very popular framework for front-end development, everyone was glad they wrote 700,000+ lines of code. Everything was great.


But time passed, the code became more and more, and here's the problem - in our world, everything very quickly becomes outdated. Deprecated and AngularJS. We honestly updated it to version 1.5, meanwhile Angular v2 came out and updating the framework was no longer an easy task. So we decided to leave those applications that are already written as they are. And choose a new stack for the frontend. The nuance is that our platform consists of independent applications, each application is downloaded separately from the rest, which means it can be written on anything.


So we updated the environment and added React. They stopped building projects using Browserify and switched to Webpack. Now we are writing new applications on React. But the company's policy in this sense has remained the same - the team that works on the application decides on what to write it. Old-school teams still write in AngularJS, guys with a beard still fix bugs in Grails applications.


The idea to configure the infrastructure for Angular 8 was suggested by many. Some developers were even able to show demo applications, and some simply exclaimed what they want but cannot. After we began to build applications using Webpack, the situation improved dramatically and it seemed that you just need to add a few loaders and you're done. But it turned out a little more complicated.


 Something went wrong


UI-, . , Material UI . HTML-, , . JS-. . Angular 8 .


, UI- HTML- . , . , , . , data-ts.title:


<dialog data-ts="Modal" data-ts.title="some-title">
    <div data-ts="Panel">
        <p>Modal content.</p>
    </div>
</dialog>

. , ? Angular :


<dialog data-ts="Modal" [attr.data-ts.title]="modalTitle">
    <div data-ts="Panel">
        <p>Modal content.</p>
    </div>
</dialog>

, :



, Angular , (data-ts), title . data-ts . , , . .


-


. , . , HTML , Angular . – Issue. – . , , () Angular compiler. . ? …


… 2 . , , . , , , , . , Angular.



, – ( , ). CONTRIBUTING.md. , , Angular Pull Request . , , , , .


, Contributor License Agreement Google , . CONTRIBUTING.md. , .


yarn-, . yarn install . : yarn install, 5-7 .


, – . , , , . , , , . , . Angular , . , , . – - ; , , . , - , :


screenshot of the original code


, ? ( boundProp). attr, ( ), , . , . , . , :


fixed version


! , . . , Angular, . Unit- , spec-. , , , . HTML , . , ! , , :


Added unit test


, . , … , : 37000+. , , . . Pull-Request. …



… 2 , . ? , , , Angular. Andrew Kushnir, . . ( , 2 ). , . Pete Bacon Darwin – , 2019 – . !


, , – , UI-. Issue Pull-Request GitHub. .


. , , , HTML- . , PR. … .


, Angular PR . (, ), , HTML- svg- [attr.height.px]="16", height=”16”. , , svg- 9 !


, Pull-Request . , , , .


, , , , Pull-Request.


The same letter


. , . ?


, Angular. , Angular 9.0.0-rc.2. , 9 .



: . . , . , .


If the project is large and popular, this does not mean that you can’t make your own changes there. If you have a good idea or you are sure that something is not working as expected - try it. Even if the price of your changes is one line. Often, the development team is very positive about any external help. And often they themselves just do not have time to fix this or that problem.
If it worked out for me, it will work out for you too!


All Articles