CDK The toolbox HAPPY for the Angular developer Christian Janz - - PowerPoint PPT Presentation

β–Ά
cdk
SMART_READER_LITE
LIVE PREVIEW

CDK The toolbox HAPPY for the Angular developer Christian Janz - - PowerPoint PPT Presentation

Mar 06, 2024 454 likes β€’688 views

CDK The toolbox HAPPY for the Angular developer Christian Janz @c_janz Christian Janz Senior Software Architect Please mind the gap @c_janz /github.com/cjanz https:/ CDK? Enterprise Angular Apps UI Toolkits to the Rescue

slide-1
SLIDE 1

CDK

The toolbox for the Angular developer

HAPPY πŸ˜…

Christian Janz

@c_janz

slide-2
SLIDE 2

Christian Janz

Senior Software Architect

@c_janz https:/ /github.com/cjanz Please mind the gap πŸ€”

slide-3
SLIDE 3

CDK?

slide-4
SLIDE 4

Enterprise Angular Apps

slide-5
SLIDE 5
slide-6
SLIDE 6

Material

UI Toolkits to the Rescue

slide-7
SLIDE 7

What if the behavior of a component fits, but the styling doesn’t fit?

slide-8
SLIDE 8

What if the style of a component fits, but the behavior doesn’t fit?

slide-9
SLIDE 9

Customizing components can be hard

slide-10
SLIDE 10

Build your own components from scratch

The final solution?

slide-11
SLIDE 11

CDK?

slide-12
SLIDE 12

Component Dev Kit

slide-13
SLIDE 13

Angular Component Dev Kit?

β€žThe Angular CDK gives developers solid, well-tested tools to add common interaction patterns with minimal effort. […], the CDK can help you build what you need in less time with less code and fewer bugs. The CDK is also completely unopinionated when it comes to styling, making it easy to tailor your app to any visual languageβ€œ

https://blog.angular.io/a-component-dev-kit-for-angular-9f06e3b4b3b4

slide-14
SLIDE 14
slide-15
SLIDE 15

CDK: Facts

@angular/cdk

πŸ“Œ Common base library for component development πŸ“˜ https://material.angular.io/cdk/ πŸ’Ό https://github.com/angular/components/tree/master/src/cdk  MIT License πŸ‘¦ Developed by Angular Components team

slide-16
SLIDE 16

Material CDK Angular

Core platform πŸ”˜ Base Components πŸ”— Component behaviors πŸ“³ Interaction patterns πŸ“‰ UI Components πŸ–Ž Styling πŸ“ž Themes

slide-17
SLIDE 17

CDK Modules

a11y bidi coercion accordion collections keycodes layout

  • verlay

platform

  • bservers

portal scrolling stepper testing text-field table tree drag-drop

slide-18
SLIDE 18

Live Coding Time!

slide-19
SLIDE 19

Summary

πŸ›‘ The CDK provides a lot of helpers for component development πŸ€” Before building behaviors from scratch, consider using the CDK πŸ“— The CDK source code is a good source for learning ⚠ CDK is not a full-featured UI Toolkit πŸ’› CDK can be used with any other UI toolkit

slide-20
SLIDE 20

Thank you πŸ™

@c_janz Christian Janz

https://github.com/cjanz/cdk-samples

slide-21
SLIDE 21

Images used in this slides

  • https://www.pexels.com/photo/flat-lay-photography-of-hand-tools-1029243/
  • https://www.pexels.com/photo/photo-of-person-holding-black-pen-990818/
  • https://www.pexels.com/photo/woman-in-black-coat-1181346/
  • https://www.pexels.com/photo/clear-glass-with-red-sand-grainer-39396/
  • https://www.pexels.com/photo/colors-palette-5933/
  • https://www.pexels.com/photo/selective-focus-photography-cement-2219024/
  • https://www.pexels.com/photo/coding-computer-data-depth-of-field-577585/
  • https://media.giphy.com/media/39b0YRnDVMX6M/giphy.gif
  • https://media.giphy.com/media/xT0xexIbN5TRe6RBMk/source.gif
  • https://media.giphy.com/media/N0PFV6nGA72XC/giphy.gif