Jörg Krause - Developing Web Components with TypeScript Native Web Development Using Thin Libraries

Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the books product page, located at www.apress.com/978-1-4842-6839-1 . For more detailed information, please visit www.apress.com/source-code .

This book explains Web Components. Additionally, it shows how to create a simple and small layer (a so-called thin library) around the native HTML 5 API to make your life as a developer a lot easier. This library is available as an open source project called @nyaf (Not Yet Another Framework). Its not a requirement, but it significantly reduces the hurdles for using Web Components and avoids the jump into full-blown frameworks and libraries such as Angular or React.

This book is aimed at both beginners and experienced web developers. The code is mainly TypeScript. A few examples are pure ECMAScript.

In any case, I tried not to ask any prerequisites or conditions of the reader. You do not need to be a computer scientist or in perfect command of a language; you dont need to know rocket science. No matter in what context you have encountered Web Components, you should be able to read this text. However, the most benefit from this book gets everybody already working on front-end stuff. Those overwhelmed with frameworks, techniques, and monstrous project structures will learn what modern web development has to offer. Nowadays all modern browsers are able to execute ES2015 and above natively, and transpilers such as Babel or TypeScript make it easy to adapt.

This book comes with a lot of examples and demo code. They are available on GitHub at https://github.com/joergkrause/webcomponent-book . The folders are structured following the book, chapter by chapter.

If youre relatively new to the web development field, test your knowledge by cloning the repo, bringing the examples to life, and watching the outcome. Read the text and add your own stuff once you know that the environment is up and running.

I have years of experience with Web Components. After several projects, smaller and bigger ones, my frustration was growing over the lack of support for simple tasks and the burden of huge frameworks that intentionally solve these burdens but come with an overwhelming amount of additional features. None of the frameworks felt right. I suspected that most developer support code has a similar trigger, so I decided to start my own library project.

A full description is available in the Appendix. The projects home is https://nyaf.comzept.de . Its open sourced under the MIT license and available on GitHub at https://github.com/joergkrause/nyaf .

Now Im on a mission. I want you to be able to learn the basics and avoid fat code as a fundamental part of your own work. There are some fields where it makes sense to add library stuff. Machine learning, artificial intelligence, and business intelligence are good examples. Front-end development is, honestly, not one of those fields. If you feel the need for help, then its just because you dont know enough. Thats the hard truth, but thats how it is. Once you master your field, youll see that a lot projects sell you stuff you dont need, create dependencies, and lock you in their environments. Its business, after all. But if you become an expert, youll unchain yourself from this stuff and this will improve the quality and elegance of your code.

Whenever you see a professional doing astonishing things or being a bit above the average, remember that its simply hard work. Nothing else. Talent helps, coincidences might happen, luck is possible. But for 99% of people, none of these things work. Hard work is the key.

Id like to thank my family first for understanding that projects like this, along with the daily work on code, require a lot more time than just 9-to-5. I really appreciate silent nights at the computer.

Also, again, the team at Apress was very helpful during this project, with the right mixture of time and pressure to get it done on schedule. Thank you all for the opportunity to write about a subject I really care about a lot.

Sometimes its hard, but there is always a way to see things positively. Even the biggest catastrophes may have an upside. Looking straight into the darkness might make it hard to see this. But there is one, for sure. This book and the library code used as the foundation were written during the pandemic in 2020. The upside was the leisure time not spent with friends, at holidays, or other activities. Not good, of course, but some new things learned, some pieces tried, some more lines writtenyou get the idea, I hope.