Create, Extend, and Publish Your Library with Angular

Create, Extend, and Publish Your Library with Angular

Transcript

1. Dany Paredes @danywalls www.danywalls.com Create, Extends and Publish your Library with Kendo UI
2. How many times do you create a card component?
3. Copy 💘 Paste
4. CSS !!important ⚠
5. Agenda 1. Why create a library? 2. Scenario 3. Creating our first library 4. Creating our Component 5. Publishing locally 6. Using our library locally 7. Themes
6. About Me Dany Paredes 🏀 NBA 🏆🅰 GDE x 4 🥇 Telerik Champion 󰜻Kendo UI / Google Dev Library http://danywalls.com | @danywalls
7. Why I need to create a library ?
8. Why create a Library? Facilitate reuse Collaboration Consistency
9. Scenario We work for a large accounting software company that needs to release two new applications for banking and registration. Both applications require a set of buttons. What can we do? - Create identical buttons for both the banking and registration applications. - Share the CSS between both applications and duplicate the button component. - Make sure we think long term: What would happen if the company changed its brand color? This should be something we ought to be able to update in the future without too much hassle.
11. Editor Preview Both npm i -g @angular/cli
12. Letʼs go!!!!
13. ng new my-company --create-application=false Create workspace
15. ng generate library my-company --prefix=donweb The –prefix= changes your component prefix from <app-my-lib> to <donweb-my-component>, by default. Generate Library
17. ng g c components/button public-api.ts The key files
19. npm pack ng build donweb-ui npm link npm link donweb-ui Creating The Button Packaging
21. import { ButtonComponent } from 'donweb-ui'; npm i don-web-ui.tgz Install and Import
23. Next Challenge ?
24. CSS Custom Properties Theming CSS Custom Properties (also known as CSS Variables) helps to use variable to and reuse values throughout your stylesheets
25. :root { --primary-color: #3498db; --text-color: #333; } CSS custom properties (variables) https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
26. :root { --btn-bg-color: rgb(55, 114, 222); --btn-color: rgb(134, 206, 33); } donweb-button[data-theme="summer"] { --btn-bg-color: rgb(222, 24, 114); --btn-color: rgb(143, 218, 43); } donweb-button[data-theme="spring"] { --btn-bg-color: rgb(199, 206, 57); --btn-color: rgb(179, 29, 225); } Theme.css
27. background-color: var(--btn-bg-color); color: var(--btn-color); Button.css
28. { "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../dist/donweb-ui", "lib": { "entryFile": "src/public-api.ts" }, "assets": [ "src/lib/theme/**" ] } ng-package.json
29. @import '../node_modules/donweb-ui/src/lib/theme/theme.css'; styles.css
31. What next? - What happened if I donʼt like the sprint or summer colors? - How to publish to npm ? - If happen I want to extends my library with other ?
32. Extends Themes The power of CSS Variables
34. NPM
35. Publish to NPM npm login npm publish - Create your account - Active the 2factor
37. Extends and Publish
38. The Power of Kendo UI
40. Schematics https://schematics.pbuilder.dev/
41. Tips Nx: Great nx.dev Great tool for monorepo all code in one place with consistency and easy dependency management. StoryBook: Simplify sandbox for other developers and the company to play with the UI components with documentation and user cases Stories) easy. storybook.js.org Cypress: cypress.io cover e2e and cypress component testing and test your components quickly. Jest: Angular testing library + jestjs.io Unit test for services and business.
42. Questions?
43. Watch again ? https://www.youtube.com/watch?v=oan-wx1q7is https://www.youtube.com/watch?v=D__Cbe9u608 Part 2 Part 1
44. Resources - https://github.com/danywalls/donweb_landing - https://github.com/danywalls/donweb-ui/tree/master/projects/do nweb-ui - Angular - Workspace and project file structure - https://angular.io/guide/creating-libraries - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c ustom_properties