Adventures in Angular

AiA 143 Kendo UI with Burke Holland Charles Max Wood and Burke Holland discuss Kendo UI. Burke Holland is on the Developer Tools Division at Progress. The discussion ranges from the introduction of Kendo UI to tests used for Angular apps. Stay tuned to discover what Kendo UI can do for you![00:01:50] Shutout for Angular Remote ConfCharles will be picking speakers really soon so get your ticket at the early bird price.[00:02:15] – Introduction to Burke HollandBurke Holland is working for Progress in the Developer Tools Division on the Developer Relations Team. They work on products like NativeScript, KendoUI and all the developer tools that Progress makes, which is mostly UI components and mobile frameworksQuestions for Burke Holland[00:03:00] – What is Kendo UI?Kendo UI is a Javascript UI library. It has open source components (Kendo UI Core), but it’s primarily commercial. It’s more on heavy lifting text scenarios like grid that has sorting and filtering, drag and drop, grouping, scheduler, robust calendar interface, pivot grids, Gantt charts, data visualizations. We’ve rebuilt Kendo UI from the ground up using Angular components. It’s the Kendo UI Core Angular that was released last January.[00:08:00] – How are Kendo UI elements pulled for use into an app?There’s a private npm repo that you would just pull in and bundle some of the widgets together. Inputs can be a drop down list, a combo box, autocomplete, etc. Using npm and install -@progress/kendo-angular-input, you get all of those inside your npm modules folder. We and the team are pushing to move to the public npm repo so that people don’t have to register for an account.[00:13:00] What about mobile development? Does this work with NativeScript?Kendo UI widgets do not work inside of NativeScript for mobile apps. However, we are looking for a possibility of merging their NativeScript UI library with Kendo UI so that you can build a website, a progressive web app, a NativeScript app, etc.[00:16:00] Do you also have to pull in some CSS?Kendo UI has their own CSS that is based on Sass. It has a theme builder to customize themes that you can pre-select from. Integration for Bootstrap 4 was also built because Kendo UI does not have a layout system so it doesn’t provide you with any grid system for layouts or for responsive design.[00:19:00] Do you just import it into my app and then use the components, is it that simple?It is recommended to use Angular CLI to use Kendo UI’s components and import it into an app. First step is to create a new project with the Angular CLI because Kendo UI is designed to work with it. You can work with SystemJS, instead, but it requires some tweaking. Next, you would need to add the private npm repo which registers the end point on the terminal. And then, npm-install to install the components. After that, you can include them in your app module file. Import Kendo grid from @progress/kendo-angular-grid. Then, you can import them into your module so you use it in your templates.[00:23:00] – Can I tie a chart to a grid, update the chart and have the grid change?Everything that Angular updates, Kendo UI just updates too. If you buy two components to the same array and you update that array, both of those components are going to update because they’re using Angular’s binding.[00:24:00] – Does Kendo UI work with the older versions of Angular?Kendo UI works with Angular 1.x. By the way, AngularJS means Angular 1.x. Meanwhile, Angular means Angular 2 and up. Directives for Angular 1.x wrap Kendo UI components.[00:28:00] – When moving my component in AngularJS to Modern Angular, do I have to include both of those in the product?I can’t provide any guidance here, other than I wouldn’t do that. If you migrate, you’re going to be firing up a new project but you should be able to move your application logic over pretty well. However, we still have this idea of services and injection and those things are transferable. And then, when you use Kendo UI components, the only thing that’s really transferable there is the configuration settings.[00:29:00] – How do you write tests if you’re testing Angular app? Are there other things that you should be testing?That would mean there’s some sort of functional testing and unit testing. If we’re talking about unit testing, you should just test the way that you would normally test Angular. For functional test, you need a functional testing tool like Selenium or Test Studio.[00:30:00] – Is there anything else that people need to know about Kendo UI?We’ve got a lot of other components coming so stay tuned on that. We’re also working on some React stuff. We always love to get feedback. We have a github repo.PicksBurke Holland:

• Server list
• Azure Functions Challenge
• Medium article on Samsung’s weird emoji
• Twitter at @burkeholland
• Twitter of Tara Z. Manicsic

Charles Max Wood:

• Serverless library in npm
• AWS Lambda
• Slack room for the podcast (adventuresinangular.com/slack)
• Angular Remote Conf
• Get A Coder Job
• Stack for Slack automation
• MemberPress on WordPress

Special Guest: Burke Holland.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today's episode, Adventures in Angular features Angular and Electron with Ryan Chenkie. Ryan is a product owner, blogger, and JavaScript trainer. His interests in working on Angular with other technologies led him to using it on desktop apps with Electron. Tune in!Special Guest: Ryan Chenkie.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

How long do you wait to load regular Angular? Today's episode features Migrating a Large Angular 1.x App to Angular 2+ with Ciro Nunes. Ciro is a frontend engineer at CrossEngage. He appeared on episode 89, where he talked about Angular CLI. Now, he shares how they migrated an app and the challenges they faced. Tune in!Special Guest: Ciro Nunes.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode, Charles Max Wood and Ward Bell discuss NgDoc.Io with Joe Eames and Alyssa Nicoll. NgDoc.Io is a website that contains all Angular-related content in the community. It includes sample projects and apps. It's a great resource for everyone who wants to learn about Angular. Tune in!

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode, Charles Max Wood, Lukas Reubbelke, Ward Bell, Joe Eames, and Alyssa Nicoll discuss ng-conf Roundup. Stay tuned as they share their meaningful experiences in attending the conference!

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode, Charles Max Wood, Joe Eames, and Alyssa Nicoll discuss Progressive Web Apps with Houssein Djirdeh. Houssein is a front-end engineer based in Toronto. He works for Rangle.io where he builds mobile web apps strictly focused on JavaScript. Stay tuned to learn more about the web apps he is working on and what he's currently up to!Special Guest: Houssein Djirdeh.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode, Charles Max Wood, Ward Bell, and Alyssa Nicoll discuss NGRx with Mike Ryan. Mike is a senior software engineer at Synapse Wireless, Inc. in Huntsville, Alabama and is a core team member of NGRx. What he does in work is that he builds real-time interactive UIs for industrial applications. Stay tuned to learn more about what NGRx and what he currently enjoys doing related to web development!Special Guest: Mike Ryan.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode, Charles Max Wood, Joe Eames, John Papa, Lukas Reubbelke, and Ward Bell discuss Catalog of Angular Libraries and Components with Romuald Brillout. Romuald studied computer science and does freelance in programming for particular clients. Stay tuned to learn more about the topic and what he is currently up to! Special Guest: Romuald Brillout.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode, Charles Max Wood, Alyssa Nicoll, Joe Eames, John Papa, Lukas Reubbelke, and Ward Bell discuss Angular Flex Layouts with Thomas Burleson. Thomas has been a part of the Angular community since dot 9 and is currently taking the lead on flex layout. Tune in to learn more what this new library from Angular is all about and discover what it has in store for you.Special Guest: Thomas Burleson.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode, Charles Max Wood, Alyssa Nicoll, Joe Eames, and Ward Bell talk about Joe's experience in building an application with MEAN. Tune in to learn about this JavaScript framework, and hear what happens when Joe gets MEAN.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.