cdk
play

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

Mar 06, 2024 β€’454 likes β€’684 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

  1. CDK The toolbox HAPPY πŸ˜… for the Angular developer Christian Janz @c_janz

  2. Christian Janz Senior Software Architect Please mind the gap πŸ€” @c_janz /github.com/cjanz https:/

  3. CDK?

  4. Enterprise Angular Apps

  6. UI Toolkits to the Rescue Material

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

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

  9. Customizing components can be hard

  10. Build your own components from scratch The final solution?

  11. CDK?

  12. C omponent D ev K it

  13. Angular Component Dev Kit? β€žThe Angular CDK gives developers solid, well-tested tools to add common interaction patterns with minimal e ff ort. […], 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

  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

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

  17. CDK Modules a11y accordion bidi coercion collections drag-drop keycodes layout observers overlay platform portal scrolling stepper table testing text-field tree

  18. Live Coding Time!

  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

  20. Thank you πŸ™ https://github.com/cjanz/cdk-samples Christian Janz @c_janz

  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 β€’

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend

Indie Marketing 101 not Todays Session Presenting for audience with varying levels of

Indie Marketing 101 not Todays Session Presenting for audience with varying levels of

Indie Marketing 101 not Todays Session Presenting for audience with varying levels of experience, skills The Basics Where, when, how to start The Marketing Mix Creating a Marketing Plan Examples Q & A Objectives

750 views β€’ 41 slides
A physical analogue of the Schelling model c, 1 Alan Kirman, 1 , 2 , 3 Dejan Vinkovi 1

A physical analogue of the Schelling model c, 1 Alan Kirman, 1 , 2 , 3 Dejan Vinkovi 1

A physical analogue of the Schelling model c, 1 Alan Kirman, 1 , 2 , 3 Dejan Vinkovi 1 Institute for Advanced Study, Princeton, NJ 08540, USA 2 GREQAM, Ecol e des Hautes Etudes en Sciences Sociales, Institut Universitaire de France 3

409 views β€’ 17 slides
Wireless Application Protocol WAP F. Ricci 2008/2009 Content Web and mobility Problems

Wireless Application Protocol WAP F. Ricci 2008/2009 Content Web and mobility Problems

Wireless Application Protocol WAP F. Ricci 2008/2009 Content Web and mobility Problems of HTML in the mobile context Wap 1.x Motivations Features Architecture Examples of WML (Wireless Markup Language) pages Wap

500 views β€’ 32 slides
Assignment 1 Florian Vesting 2012-09-07 Florian Vesting Assignment 1 2012-09-07 1 / 11

Assignment 1 Florian Vesting 2012-09-07 Florian Vesting Assignment 1 2012-09-07 1 / 11

icoFoam interFoam simpleFoam Utility Assignment 1 Florian Vesting 2012-09-07 Florian Vesting Assignment 1 2012-09-07 1 / 11 icoFoam interFoam simpleFoam Utility icoFoam Cavity Florian Vesting Assignment 1 2012-09-07 2 / 11

367 views β€’ 11 slides
Gradient Descent Michail Michailidis & Patrick Maiden Outline

Gradient Descent Michail Michailidis & Patrick Maiden Outline

Gradient Descent Michail Michailidis & Patrick Maiden Outline Mo4va4on Gradient Descent Algorithm Issues & Alterna4ves Stochas4c Gradient Descent

839 views β€’ 29 slides
Help, my Security Officer is allergic to DevOps! DevOps and Security, a match made in heaven

Help, my Security Officer is allergic to DevOps! DevOps and Security, a match made in heaven

Help, my Security Officer is allergic to DevOps! DevOps and Security, a match made in heaven or a forced marriage from hell? Pop quiz: What is the acronym for... Hyper Text H T Transfer T Protocol P Pop quiz: What is the acronym for...

708 views β€’ 41 slides
Julia tutorial Introduction Some useful pointers Getting started Julia syntax

Julia tutorial Introduction Some useful pointers Getting started Julia syntax

CS/ECE/ISyE 524 Introduction to Optimization Spring 201718 Julia tutorial Introduction Some useful pointers Getting started Julia syntax Plots in Julia Learning JuMP Submitting a notebook Laurent Lessard

524 views β€’ 16 slides
Todays Presenters Kendra Jones Childrens Librarian, Tacoma Public Library, WA Soraya

Todays Presenters Kendra Jones Childrens Librarian, Tacoma Public Library, WA Soraya

Todays Presenters Kendra Jones Childrens Librarian, Tacoma Public Library, WA Soraya Silverman Cory Eckert Youth Services Librarian, Librarian, Post Oak School, Summerlin Library, Las Vegas Houston, TX Clark-County Library District,

871 views β€’ 15 slides
The Electromagnetic Spectrum Principles of Astrophysics & Cosmology - Professor Jodi Cooley

The Electromagnetic Spectrum Principles of Astrophysics & Cosmology - Professor Jodi Cooley

The Electromagnetic Spectrum Principles of Astrophysics & Cosmology - Professor Jodi Cooley Camera-Detector: Human Eye - The lens (camera) focuses light onto the retina (detector). - Aperture of a dark- adapted pupil is < 1 cm in

541 views β€’ 17 slides
hypertext, multimedia finding things finding things navigating hyperspace and the

hypertext, multimedia finding things finding things navigating hyperspace and the

hypertext, multimedia and the world-wide web chapter 21 understanding hypertext understanding hypertext text escapes linearity, words and the page hypertext, multimedia finding things finding things navigating hyperspace

414 views β€’ 10 slides
Taskerman A Distributed Cluster Task Manager Raghavendra D Prabhu rprabhu@yelp.com

Taskerman A Distributed Cluster Task Manager Raghavendra D Prabhu rprabhu@yelp.com

Taskerman A Distributed Cluster Task Manager Raghavendra D Prabhu rprabhu@yelp.com @randomsurfer Distributed Systems Yelps Mission Connecting people with great local businesses. Datastore Ecosystem @ Cassandra Elasticsearch Zookeeper

847 views β€’ 61 slides
Animation Why animation? Realism and fluidity of interaction Open/Close Spring-back

Animation Why animation? Realism and fluidity of interaction Open/Close Spring-back

Animation Why animation? Realism and fluidity of interaction Open/Close Spring-back constraints Transitions from collaborators System Other people PowerPoint Actual Animation effects Basic linear transform

868 views β€’ 12 slides
Animation Presented By Timothy Chan Outline 1. Principles of Traditional Animation Applied to

Animation Presented By Timothy Chan Outline 1. Principles of Traditional Animation Applied to

Animation Presented By Timothy Chan Outline 1. Principles of Traditional Animation Applied to Computer Animation (Lasseter, 1987) 2. Animation: Can it facilitate? (Tversky and Morrison, 2002) 3. On Creating Animated Presentations (Zongker

737 views β€’ 54 slides
Transitions and Transforms Introduction to CSS Animations PRESENTED BY Homer Christensen ABOUT

Transitions and Transforms Introduction to CSS Animations PRESENTED BY Homer Christensen ABOUT

Transitions and Transforms Introduction to CSS Animations PRESENTED BY Homer Christensen ABOUT HOMER MadCap Flare user since Version 4 Consultant - MadSkills Tech Writing / Info Architect for 30 years Clients include Nestle

681 views β€’ 21 slides
CSS Transforms, Transitions, and Animation Basics WordCamp Northeast Ohio 2016 Beth Soderberg

CSS Transforms, Transitions, and Animation Basics WordCamp Northeast Ohio 2016 Beth Soderberg

CSS Transforms, Transitions, and Animation Basics WordCamp Northeast Ohio 2016 Beth Soderberg @bethsoderberg | What is a transform? "to change in form, appearance, or structure; metamorphose" - Dictionary.com The CSS transform

806 views β€’ 46 slides
Animation Ma Maneesh Agrawala CS 448B: Visualization WInter 2020 1 Last Time: Color 2 1

Animation Ma Maneesh Agrawala CS 448B: Visualization WInter 2020 1 Last Time: Color 2 1

Animation Ma Maneesh Agrawala CS 448B: Visualization WInter 2020 1 Last Time: Color 2 1 Color Brewer www.colorbrewer.org 3 Announcements 4 2 Final project New visualization research or data analysis project I Research : Pose problem,

1.09k views β€’ 48 slides
Computer Animation Karen Liu associate professor at School of Interactive Computing Murali

Computer Animation Karen Liu associate professor at School of Interactive Computing Murali

Computer Animation Karen Liu associate professor at School of Interactive Computing Murali Varma graduate student at School of Interactive Computing Administrations http://www.cc.gatech.edu/classes/AY2012/ cs4496_spring Slides and

1.07k views β€’ 78 slides
11.2 Animation Principles Hao Li http://cs420.hao-li.com 1 Additional Reading Rango: Character

11.2 Animation Principles Hao Li http://cs420.hao-li.com 1 Additional Reading Rango: Character

Fall 2015 CSCI 420: Computer Graphics 11.2 Animation Principles Hao Li http://cs420.hao-li.com 1 Additional Reading Rango: Character Walking Tests Computer Animation Models have parameters: polygon positions, normals,

736 views β€’ 39 slides
Custom Drawing & Animation CS 442: Mobile App Development Michael Saelee <lee@iit.edu>

Custom Drawing & Animation CS 442: Mobile App Development Michael Saelee <lee@iit.edu>

Custom Drawing & Animation CS 442: Mobile App Development Michael Saelee <lee@iit.edu> Frameworks - UIKit - Core Graphics / Quartz - Core Animation - OpenGL ES UIKit OpenGL ES Core Core Graphics Animation UIKit (mostly)

1.32k views β€’ 88 slides
React Native Composing Animations 1 Overview Goals of animation Stationary objects must

React Native Composing Animations 1 Overview Goals of animation Stationary objects must

React Native Composing Animations 1 Overview Goals of animation Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey

823 views β€’ 26 slides
Animation Piech, CS106A, Stanford University Our story so far Piech, CS106A, Stanford

Animation Piech, CS106A, Stanford University Our story so far Piech, CS106A, Stanford

Animation Piech, CS106A, Stanford University Our story so far Piech, CS106A, Stanford University Our story so far Piech, CS106A, Stanford University Learning Goals 1. Write animated programs 2. Center an object Piech, CS106A,

1.19k views β€’ 71 slides
aComment : Mining Annotations from Comments and Code to Detect Interrupt-Related Concurrency Bugs

aComment : Mining Annotations from Comments and Code to Detect Interrupt-Related Concurrency Bugs

aComment : Mining Annotations from Comments and Code to Detect Interrupt-Related Concurrency Bugs Lin Tan , University of Waterloo, lintan@uwaterloo.ca Yuanyuan (YY) Zhou, University of California, San Diego Yoann Padioleau, Facebook Inc. OS

1.57k views β€’ 67 slides
CS 418: Interactive Computer Graphics Basic Animation Eric Shaffer Simple Animation with WebGL

CS 418: Interactive Computer Graphics Basic Animation Eric Shaffer Simple Animation with WebGL

CS 418: Interactive Computer Graphics Basic Animation Eric Shaffer Simple Animation with WebGL Animation means we: Draw some things Move the geometry slightly Draw the things again Repeat. Things we will

828 views β€’ 8 slides
#11: Side-Scrolling and Time-Based Animation SAMS SENIOR CS TRACK Last Time Used input and

#11: Side-Scrolling and Time-Based Animation SAMS SENIOR CS TRACK Last Time Used input and

#11: Side-Scrolling and Time-Based Animation SAMS SENIOR CS TRACK Last Time Used input and output to creative interactive applications. Used model , view , and event controllers to create interactive graphics. Today's Learning Goals Use

494 views β€’ 17 slides

More recommend