Release season is here! Sign up for the Telerik and Kendo UI R3 2018 release webinars to get a detailed review of everything new in the release, including feature and control demos and more.
With the Telerik and Kendo UI R3 2018 Release going live on September 12, you can expect lots of improvements and additions across the web, mobile and desktop developer toolkits for both .NET and JavaScript developers. That being said, we'd like to give credit where credit is due, and so we extend our thanks to all of you. You have continuously submitted your feedback, suggestions, comments and requests through our Feedback Portal, and been our guiding light in shaping our product roadmap. (Thank you - you know who you are!)
You've been doing a great job in both suggesting new controls and features and also identifying potential improvements to the products, and we would like to (politely) ask you to keep 'em coming!
Taking your feedback into account, in the R3 2018 Release of the Telerik & Kendo UI product lines you will see numerous new controls across the suites (such as MultiColumnComboBox, MultiViewCalendar, ArcGauge, Schedulers, Calendars & Charts), new Mac-Inspired Crystal and Material Themes, plus more features for the most commonly used components. That's just the tip of the iceberg and me trying to be concise!
While you are patiently waiting and excited to get your hands-on experience with the latest features, controls, themes and other goodies coming with the release, make sure to register for the Telerik and Kendo UI Release Webinars, where product experts from Progress — Sam Basu, Ed Charbeneau, Carl Bergenhem, John Bristowe, and Alyssa Nicoll— will take you on a journey and provide you with a detailed review of the latest features we shipped with the release.
We all face user experience (UX) challenges when building apps. Bekah Rice of trumatter describes her own experiences as a designer and developer, and how Kendo UI has helped.
At Progress, we know user experience is a critical part of the design of any app. It's why we work hard to build developer tools that help make it easier for you to deliver an amazing experience to your users. But how are our tools being applied in the real world?
We caught up recently with Bekah Rice, an interactive designer and frontend developer at truematter, to talk about user experience (UX), accessibility and web app design. She spoke to us about the kinds of demands she faces in her role and how Kendo UI has been an effective force multiplier for her process.
Here's a short video summary of the full interview with Bekah:
Progress: Hi Bekah, can you tell us a bit about what you do at truematter?
Bekah: Typically, I'm involved in designing the interfaces for complex web applications. We do everything from sites to Internets, to wearables, to anything with a screen. So designing and thinking through the interactions going on in that final product, all the way through to actually doing the frontend code for it.
Progress: And what are the kinds of problems that you are trying to solve for your customers?
Bekah: We have a pretty diverse client base. One issue in particular that I can think of that was fairly recent: with all of our clients we do user research before we even start a project. So we go to their location if it's an internal application, which in this case it was, and we spend time with the end users watching them work. So literally sitting there with them at their desk watching them do their day-to-day activities.
And we had one user in particular that just basically told us, I look at spreadsheets, numbers, charts all day, and it sucks. It just sucks, my eyes hurt, you know, staring at these numbers all day. And so working on that project that's all I could think about. How can I make this suck, less for him. And so going back to that periodically through a project, that's a big thing we do. With that problem in particular the thing that I obviously want to focus most on is how I can simplify that interaction for him. How can I make it effortless, and really beautiful? Beautiful things don't tend to suck as much.
Just thinking through how can we make those rows and rows of numbers that he has to look at for his job just a little more pleasant for him so his eyes don't hurt.
Progress: And how has Kendo UI helped with this process?
Bekah: Before we were using Kendo UI we would design everything from scratch. So in the beginning stages of the project we have an information architect that wireframes the interface, designers that then design the final look and feel, and then developers obviously. But when we got to development it was always kind of like, we're out of hours, we're out of budget, make this thing you've never seen before. And make it do all of this.
That put a lot of strain especially on our frontend team to try to execute all of this complexity, all of these very specific types of interaction that we've spent all this time designing. So when we found Kendo UI we were like, "Oh my God, here's this toolset, this force multiplier for us to start with at the beginning of the project."
Having that toolset you know, okay we're going to have a chart here, we're going to have a grid, etc. Kendo UI has that out of the box and we know what we can do with it, what we can't, where we can customize things to meet those very specific needs that we've identified early on. And that's been a game changer. I mean just having that and knowing what we have at our disposal ahead of time is awesome.
With our clients it's the same way. One of the things that was really bad about developing all these custom components before using Kendo UI was the maintainability of that for us internally is a project in itself. As anyone that's tried to do that type of thing knows, it's not maintainable long-term unless you're actively working on it day-to-day. We don't expect our clients to do that either. But with Kendo UI, that's already done for us, and so we know that it's been tested. We know that it's being constantly updated. So that's one less thing that we have to think about.
Same thing with the interactions that are already built in. Having to fine-tune that, yes we do that from time to time. But knowing that I can focus more on the way things look, the way they're going to work for the user and not the actual gritty functional aspects of it, is great.
And our clients appreciate it too because it's kind of a common language we can share. We frequently work with their development team, so we're like an extension of their team. When we tell them we're using Kendo UI it's not just, "Okay here's this thing you've never heard of." It's got a full library of documentation that their team can learn and that we already know here. And it becomes a common language for us to share so that when we're talking about these parts that we're going to use, they already know what they are, what they can do, and it just makes it a little more seamless, and a lot less stressful.
Progress: So how did you get started with Kendo UI?
Bekah: We got started with Kendo UI because we heard about it from a client, actually. We were working on a project for them with their development team and tossing around some ideas for how to deal with some charts that we needed in the application. Their immediate recommendation was Kendo UI. They were a company that was already using Sitefinity, so they were very familiar with Kendo UI. And they recommended it to us, we tried it out, we were like "Wow this does way more than we need it to, great."
And that was the only part we actually used on that project but, because I had seen it, I personally tucked that away for our next project to look at again. Let's see what can we do with it. And that keeps happening actually, every time we're like "Oh I wonder if Kendo UI can do that for us," it usually does which is kind of nuts. So that got us started and I don't think there will be a time when we aren't using it.
I mean there's just too much of an advantage to having all of that flexibility and all of those tools just there.
Progress: You must run into times where you have questions or things you can't figure out. How has your interaction been with product support for Kendo UI?
Bekah: Progress has great customer support. We use them for Sitefinity all the time because we do run into issues with upgrading, and new features, you know trying to learn about them. But with Kendo UI the thing that I actually use the most is the help forum. There are a ton of really great people on there that always seem to have that one answer I need.
Even as recent as a week ago, I wanted to do something with the legend on the chart that isn't documented because I don't think anyone's tried to do it. Kind of a one-off. I posted in the forum, and literally a couple hours later one of the admins gave me the exact solution. Even made a plunker for me that showed it. So it was something that I was thinking, "Oh this isn't possible I should just find a work around" that turned into "oh it is possible and he showed me how to do it," so that was great. I was really excited.
Progress: With your work in user experience, accessibility must be an important factor for you. How has Kendo UI stacked up in that regard?
Bekah: Yes, one of our big things here at truematter is obviously we are a user experience firm, and that experience includes people that have various disabilities. So accessibility is a huge thing for us. Every product we release, every digital product is accessible. At least to AA standards, that is an internal goal of ours, and so any toolset we use also has to allow for accessibility. Kendo UI does that out of the box.
And it's just one less thing we have to think about, which is great when we're testing because we go so far as to test all of our products with the screen reader. It's one thing to be able to actually read the app or the screen, it's another thing to enjoy reading it, and for it to make sense. And so it's been really helpful that when we are using Kendo UI we don't have to think about accessibility concerns because it is accessible. So it allows us to spend more time on the things that really matter to us and that's the overall experience.
Progress: A consistent look and feel for an app is an important part of the overall user experience. How easy have you found it to apply specific themes to Kendo UI?
Bekah: The Kendo UI theming is something that I explored a good bit when we first started using it. I think it's great because I know that there are a lot of development teams out there, and we've worked with them where they don't have a designer in house. And if they do they're a print designer so they might not be as familiar with designing for web, for applications. And so a lot of the theme's that Kendo UI have are pretty diverse and I could see them used for just about anything. For a developer that doesn't have a design background, that's great.
Here at truematter we have designers—I am one myself—and because we spend so much time with our users, we're always doing a very custom design. So I have used some of the themes loosely, like I'll take the pieces and parts that I know are going to work with what we've designed. And because it's so flexible I'm able to override the parts that maybe won't fit.
I use SASS for all of my projects so the fact that there's an easily accessible list of variables that I can manipulate with the theme, it's great. It's very quick for me to take one of the basic themes that Kendo UI has and change it to meet my needs. And we do that pretty frequently, as far as even to change the icon's that are used, things like that. Having that flexibility is hugely important to us because a lot of the third-party libraries we've used don't allow for that. Or at least they do, but you're just basically overriding their styles and spending a ton of time bloating your code to do one thing like change a color.
Progress: And are you working with any of the JavaScript frameworks?
Bekah: When I first started using Kendo UI we primarily used the Kendo UI for jQuery. It was really great for me because I'm very familiar with jQuery, that was kind of where I started, and it was really seamless to initiate myself in to Kendo UI for jQuery.Kendo UI for Angular wasn't as much for me because Angular was fairly new to me.
We actually recently had a project that we started where a company wanted to take a very outdated, very complex application and move it to web. This was their first web application and they wanted to use Angular, so immediately I went to Kendo UI and looked at the Kendo UI for Angular, which we had never used before. So far it's been pretty great, it's been a little more of a learning curve for me personally. But the documentation has been good enough for us to move forward without any issue. We had also looked at the Kendo UI for React because we had kind of talked about Angular versus React in the beginning, but eventually landed on the Angular version. The ability to use the node packages has been great. Being able to just install the packages I need at any given time has been kind of nice. It's a lot faster.
Progress: What advice would you have for someone who was just getting started with Kendo UI?
Bekah: If someone asks me about using Kendo UI I would tell them to just lean into the learning curve, there's a little bit of one there at the beginning. Really spend some time in the documentation and in the forums because there's a lot more there than you think. I think a lot of people when they see a product like this they feel boxed in that they have to go off of what they've seen in the examples. But it's so flexible and so easy to customize that if you spend the time up front really learning what it can and can't do, you're going to find that your options are endless.
Progress: You mention customization and flexibility, is that something that you do a lot?
Bekah: We always customize Kendo UI. On every project we use it on, there are parts that we regularly change and, because we know we're going change them, we've actually kind of created our own internal base theme that we start with. A good example of one thing that we always do is the date picker. So because our clients are so diverse and our users are so diverse we have to plan for different user types. So a power user, someone like me who uses the web all time, can use that date picker without even thinking. Someone like my Grandma who's maybe a novice user would struggle with it because it's not intuitive enough for her.
So some of the things we do, you know, making sure that the interactions between components like the date picker and a button, that they're the same so you can recognize a pattern if you're someone that's not a power user. And you know what to expect from an interaction. So when I click the date picker if I want to go back a month, it needs to be very obvious to me how I can do that.
We make sure of the styling of it, the interaction itself, is very clear for whatever type of user encounters it. Things like that are typically what we customize. I like that with Kendo UI I'm not constantly fighting it, so it does allow me to be flexible and to customize things. There are times when I'm searching through the documentation or searching through the forums like asking "Hey has anybody tried to do this?" and "What did you do to get it to work?" And typically I'm able to find an answer and if I'm not, there's so many workarounds because it's so flexible. I'm always able to find a way to do something close to what I wanted to do or eventually customize it to where I wanted it to be.
Progress: So if you had to summarize your experience with Kendo UI…
Bekah: Kendo UI is a force multiplier for our dev process, for our design process. Kendo UI allows me to focus on the things I do best, to spend more time designing the user experience and less time fighting with the functionality.
Take a look into the picker controls in Conversational UI as a part of Telerik UI for Xamarin, and explore rendering modes with various APIs.
ChatBots are all the rage these days and for good reason. A well-trained chatbot with deep contextual knowledge can seamlessly automate lots of workflows with human-computer interactions. And enterprises are beginning to discover the cost benefits of chatbot automations - Bot frameworks and AI are destined to rule the next generation of apps.
For developers though, the key would be engaging user experiences through chatbots. And this is where Conversational UI comes in - with polished modern UI for powering chatbot experiences on web, desktop or mobile. One of the most common interactions in chat conversations is asking the user to make a selection from a list of things - you want this to be a rich experience, but seamless for the user.
We recently looked at how this works with date and time pickers. This article unpacks the ItemPicker and CardPicker controls in Conversational UI from the perspective of a Xamarin.Forms mobile app and explores ways of rendering such a picker UI to make for smooth user experiences.
Pickers
While we've already covered the basics of Conversational UI, text based messages in a chatbot conversation are easy to handle - the real value in Conversational UI is in complex custom UI. This is achieved through the RadChatPicker control, which is responsible for presenting the user with a selection of choices as a part of the chat conversation. If you had to choose pizza toppings, would you type them down in text, or simply check off a list? You get the idea. In a chat conversation, it is almost always quicker to elicit user responses when presented with a collection of items to choose from.
Depending on the information that is to be presented to the user and the choice that should be made, the RadChatPicker allows developers to render one of the following types:
DatePicker: for displaying a Calendar to choose a date
TimePicker: for displaying a clock view to choose a time
ItemPicker: for presenting a list of suggestions the end user could choose from
CardPicker: for presenting a list of cards with structured layout
The RadChatPicker showcases the value we can offer developers with Conversational UI - the polished sophistication through custom complex chat UI. We covered Date & Time pickers earlier - the bigger need is often to offer selections from a custom list. Telerik and Kendo UI can now offer Item and Card picker controls for various platforms, to be used as a part of chatbot conversational UI.
ItemPicker
Need to have the chatbot user pick one or more options from a list?The RadChatPicker control provides an ItemPickerContext that can be used to display a list of options for the user to choose from. As expected, ItemPickerContext exposes the following properties you can use to provide a list of possible options to the user:
ItemsSource: defines the data source to be bound to as options
SelectionMode: controls single or multiple selections from ItemSource
SelectedItems: defines the currently selected items
SelectedItem: defines the last selected item
To try out the ItemPicker, let's first set up a chat - this can be done entirely in the shared PCL or .NET Standard library in a regular XAML page, like so:
In the code-behind, we can set up the bot author and start a chat conversation. And when it comes to demonstrating selecting options from a list, there is simply no better example than picking your favorite pizza toppings - so let's do that.
public MainPage()
{
InitializeComponent();
this.botAuthor = new Author ();
this.botAuthor.Name = "MyBot";
this.botAuthor.Avatar = "BotFace.jpeg";
chat.Items.Add(new TextMessage { Author = this.botAuthor, Text = "Welcome to our chat!" });
this.SelectedPizzaToppings();
}
Now that we have a function to handle pizza topping selection dialogue, we can enhance the ItemPickerContext with some desired properties and add the PickerItem into the chat conversation's Item collection. Notice how we're setting the ItemSource property - this could be a generic collection of any type of object to be used for data binding.
Let's fire up our app - and sure enough, we see a nice polished ItemPicker control allowing for the selection of pizza toppings from a list.
In the code above, we're also listening in on the PropertyChanged event of the ItemPickerContext - in particular, when the SelectedItem property value changes. This is triggered once the user makes selections - our event handler grabs the SelectedItem property value and aggregates all selected toppings. SelectionMode set on the ItemPickerContext can allow the user to choose one or more items from the list - it would be pretty brutal if it was single topping pizza only, right?
CardPicker
When your chatbot presents a list of options for the user to choose from, you would ideally like it to be a seamless user experience. It may be rich data, but it should be easy to glance at and choose from. This is where the Telerik CardPickers in Conversational UI can light up your chatbot scenarios.
The RadChatPicker control provides CardPickerContext that can be used to display a list of customizable cards. Each card can present complex information in a user-friendly structured manner and allows the user to interact with it. As expected, CardPickerContext exposes the following properties you could use to adjust the rendering of cards:
Cards: implements IEnumerable<CardContext> that holds the available Cards
BasicCardContext: placeholder for displaying a card with Title, SubTitle and Description
ImageCardContext: derives from BasicCardContext with an additional Image property
Actions: implements IEnumerable<CardActionContext> that holds the card actions through commands
BasicCardContext
Let's try rendering cards in our app - for developers to choose which upcoming software conference to attend. After a similar chatbot setup, we new up CardPickerContext and add it to our chat's Item collection, as below:
private void SelectConferences()
{
PickerItem pickerItem = new PickerItem();
var context = new CardPickerContext { Cards = this.GetConferenceCards(pickerItem) };
pickerItem.Context = context;
chat.Items.Add(new TextMessage { Text = "Select a conference:" });
chat.Items.Add(pickerItem);
}
Notice how we're delegating construction of the IEnumerable<CardContext> to a seperate function - this is just to keep things clean so we know exactly what each card can hold. Let's return BasicCardContext with appropriate property values, like so:
private IEnumerable<CardContext> GetConferenceCards(ChatItem chatItem)
{
List<CardContext> cards = new List<CardContext>()
{
new BasicCardContext() {
Title ="VS Live",
Subtitle ="Redmond, WA",
Description ="Yesterday's Knowledge; Tomorrow's Code!",
Actions = GetCardActions(chatItem, "VSLive")},
new BasicCardContext() {
Title ="DevReach",
Subtitle ="Sofia, BG",
Description ="Central/Eastern Europe's Premier Developer Conference",
Actions = GetCardActions(chatItem, "DevReach")},
new BasicCardContext() {
Title ="MS Ignite",
Subtitle ="Orlando, FL",
Description ="The Ultimate MSFT Tech Conference",
Actions = GetCardActions(chatItem, "Ignite")}
};
return cards;
}
Notice the Actions property? This helps control what happens when a user selects a card - you can carry context through Text and bind it through Command properties. Let's return a collection of simple actions for each of our developer conferences and capture the user card selection, like so:
ICollection<CardActionContext> GetCardActions(ChatItem chatItem, string Title)
{
var selectAction = new CardActionContext
{
Text = "Select",
Command = new Command(() =>
{
var index = chat.Items.IndexOf(chatItem);
chat.Items.RemoveAt(index);
chat.Items.Add(new TextMessage { Author = this.chat.Author, Text = "You selected " + Title });
}),
};
return new List<CardActionContext>() { selectAction };
}
We're now ready to fire up our app and see the conference cards in action. Voila! Users can swipe around and see full details of each rendered card:
Once the user chooses a card, we can expect the card Actions to bubble up the context and we can stick the selection into our chat's Item collection, like so:
ImageCardContext
ImageCardContext enhances the functionality of the BasicCardContext by providing an additional Image property, so you can add an image to the card definition. This simple addition allows you to present a rich user experience. As it turns out, we humans like our visuals.
To use the ImageCardContext, we can have the same chatbot setup, but instead return an IEnumerable<CardContext> which has the Image property set for each card, like below:
One caveat to note: image resources for a Xamarin.Forms app need to come from platfom-specific projects, as in the case of our iOS project here:
Let's run our app. Sure enough, image cards make it much more enticing to pick our developer conference of choice. All other card behavior remains unchanged. It's just a better user experience.
That's a Wrap
Modern chatbots demand rich user experiences and Conversational UI is here to help developers render polished UI for enabling engaging efficient conversations. One the most common tasks in chatbot conversations is asking the user to make a selection from a list - from a user's perspective, you want this to be as simple as: 'Click, Click & Done.'
The ItemPicker and CardPicker controls in Conversational UI are here to make this easier. Developers get various rendering options, from simple lists to full-blown custom cards. Flexible APIs and MVVM support make it easy for developers to handle user selections, all the while providing a fluid user experience. Time to go light up your chatbot conversations and build amazing experiences.
The ComboBox is both a text field and a dropdown list, perfect for giving your users choices while also allowing for their input. Learn how you can easily implement one with Kendo UI.
In the last episode, you learned about the MultiSelect component, which is a dropdown list that can select multiple options. In this episode, we will visit the ComboBox.
A ComboBox is a combination of a text field and a dropdown list. You can either select from the options in the dropdown or manually enter the value. A ComboBox can be used when it is impractical to list all of your options and you are ok with accepting user input. For example, numeric data can be potentially infinite. If you use a ComboBox for choosing the font size, it makes sense to provide a few options and to let users input their own value. In this lesson, we will take a look at how to use the Kendo UIComboBox when our data comes from a remote source.
Basic ComboBox
You can create a ComboBox using a <select> element with the items defined in option elements. This is similar to how a DropDownList and MultiSelect were created. I won't demonstrate here how to do so. Instead, we will define our options inside the component's API by configuring its DataSource. The DataSource can be an array or a configuration object specifying how to load the data items. This is how to initialize a ComboBox:
The autoWidth field makes the dropdown the width of the longest item label. By default, the labels will wrap the line if they exceed the width of the dropdown. The index field sets the selected item in the ComboBox. A 0 value selects the first item. And the dataTextField and dataValueField define the names of the text and value fields used in the DataSource.
Getting Data Remotely
When you want to load data from a remote source like an API, you can use a configuration object instead of an array in the dataSource. Inside this object, you will need to add a transport object. The transport object is responsible for making the request. In this example, I am using the Github API to get a list of my repositories. This is the updated DataSource:
Inside the transport object, there is a field called read which is the action used to get the data items. The datatype is the type of result expected from the server. Possible values include JSON, JSONP and XML. And url is the location of the resource, which in this example is an API endpoint.
Specifying the Schema
Sometimes, the data is not formatted exactly the way you need it. We will look at another API that returns a list of colleges in New York City. This API endpoint will return results with multiple fields. The information we need is in the data field. However, the data items aren't listed as key-value pairs. Instead, each item is an array. This is an example of one of the data items:
[
"row-t39z.h9at-i539",
"00000000-0000-0000-73A0-165D70267CF5",
0,
1450729236,
null,
1450729236,
null,
"{ }",
"POINT (-73.99465215457163 40.73519616365903)",
"New School University / Parsons School Of Design",
"66",
"FIFTH AVENUE",
"New York",
"10011",
"http://www.parsons.edu/html/splash.html",
"1009619",
"1005760042"
]
The response does have a column field that specifies what each entry means. We are interested in the element at index 1 which is the ID and the element at index 9 which is the name. In our code, we have changed the URL in the transport and added a schema to configure the response.
The parse option is used to preprocess the response. Inside the function, we are iterating through the data array and saving each item as an object with a name and an ID field.
Conclusion
The DataSource configures the items in the component. Inside the DataSource, the transport object configures how you will get the data and the schema object configures how the data will be organized. The transport object can also be used to create, update, and delete data items. In the schema object, the parse function was used to get our data array and parse it. However, there is a data field you can use inside of the schema object to specify which field from the response contains the data items. There are many more options not listed here that allow you to customize your data to your liking.
In the next lesson, we will review the AutoComplete component. The AutoComplete is a textbox that generates the options to select based on what is typed in the field.
Try Out the ComboBox for Yourself
Want to start taking advantage of the Kendo UI jQuery ComboBox, or any of the other 70+ ready-made Kendo UI components, like Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.
Takeaways from the Concatenate Conference, a free conference for Nigerian developers with topics ranging from frameworks to design systems, performance to animation.
The Nigerian developer ecosystem has seen a lot of advancements in the past year, from organizing meetups weekly to organizing an international conference.
Concatenate Conference was created by Christian Nwamba, Brian Holt, and Sarah Drasner after a terrible experience of visa denials for Christian that stopped him from attending several other conferences he had been invited to as a speaker. The idea to hold a remote conference here in Lagos, Nigeria, came up as a result of the help of Sarah and Brian, the co-organizers. The event was targeted as a two-day, free conference for Nigerian developers, with topics ranging from frameworks to design systems, performance to animation. The inaugural conference was held on August 10-11, 2018, in Lagos.
The speakers lineup for the event was amazing. We had all top speakers from around the globe, speaking remotely about talks including serverless, data visualization, web accessibility, GraphQL and more.
Day 1—Friday, August 10
The first day of the conference commenced with Simona Cotin giving a talk on how to “Build Node.js APIs Using Serverless.” She did a great job explaining the intricacies of crafting Node.js applications with serverless architecture.
Next up we had William Imoh delivering a talk on “Static Sites on Steroids.” He did an awesome job outlining how to generate a static site using Gatsby.js.
Christian Nwamba then took the crowd on a journey with his talk on “GraphQL vs. REST”—he churned out the goodness of GraphQL to the attendees and why it’s a go-to option as compared to REST.
Colin Bendell filled his session, “Service Workers — Improving Media Performance Beyond Caching,” by outlining the importance of building web applications with the concepts of JavaScript Service Workers, browser caching for certain offline scenarios, and performance best practices to boost user conversion and experience.
Sarah Drasner also went on to give her talk on “Serverless Functions and Vue.js.” She did a wonderful job breaking down the serverless concept and how to leverage it in Vue.js applications.
The next session had Burke Holland giving a talk on “VS Code Can Do That?!?” His session covered cool tips and tricks we had no idea about, mostly on how to leverage VS Code for a better development experience. Some tips I really loved included when he explained how we can utilize Emmet in VS Code to make writing HTML much easier, and Font Ligatures with Fira code to provide a better aesthetic to your code base.
Jem Young also had a lot to share on his talk “How Things Work.” Zach Leatherman’s session was a captivating talk on “Web Fonts are Rocket Science,” and he discussed useful ways we can leverage to render web fonts quickly without disruption. Jason Grigsby had a session about “Designing Progressive Web Apps,”Aaron Gustafson gave a talk on “Designing the Conversation,” and Shirley Wu, the last speaker for the day, surprised the entire crowd with her presentation on “Data Visualization for Web Developers.” She did a live code session and demo of an application using React and D3.js that explains the concept of data visualization.
The second day started out with a quick session by Sani Yusuf. His talk, “Dear Developer, Focus on You,” was centered around how developers can achieve self-development to stay relevant in their career. The next speaker was yours truly. I shared about “Crafting Rich Documentation with Vuepress.”Mytalk was focused on the problems with documenting software and how you can leverage Vuepress as a solution for writing rich documentation.
The next session was centered around “The Layers Of The Web”by Jeremy Keith. He went on to give a detailed tour of the past, present and future of working on the web—from the building blocks of HTML, CSS and JavaScript through to frameworks and libraries right up to the latest and greatest Progressive Web Apps. Then, Eli Fitch gave a talk on “Functional CSS at Scale: Clean & Composable UI on Massive Apps.”
Wes Bos's session was an amazing talk on how to use “CSS Grid.”Omayeli Arenyeka gave a talk on “Finding Unavailable Data.”Christopher Schmitt’s talk was about “Image Formats & Optimization.” He explained why optimizing media for the web is good practice.
The next session was “A React Point of Vue: Common Mistakes and Pitfalls when making the Switch from React to Vue”byDivya Sasidharan.
Ire Aderinokun gave a talk on “Making A11Y easy,” and Sean Larkin took the next session with a talk on "Understanding webpack Under the Hood!!” Estelle Weyl‘s session was called “Simple. Fast. Accessible.” She talked about accessibility and the importance of making the web accessible and faster by explaining the accessibility features.
Brian Holt gave a talk on “10KB or Bust: The Delicate Power of webpack and Babel.” And the last speaker for the day, Mina Markham, spoke about “Using CSS Grid Today.”Her talk featured examples of how she’s been using CSS Grid currently in production, as well as the process and challenges she faced.
There were also breakout sessions in between talks, and it was a lot of fun and a learning experience for everyone. We had games and other exciting activities after the event.
Conclusion
It was an amazing experience. The sessions were filled with excitement and a lot of talks and knowledge shared. One of my favorite moments was in Divya‘s talk on “A React Point of Vue,” when she gave a detailed use case of jollof rice, a Nigerian delicacy, as an illustration for her talk. Because this was a remote conference, we had a lot of engagement and participation on Twitter with #ConcatenateConf.
This conference wouldn’t have been possible without the help of the sponsors for this event like Progress. As we look forward to next year’s event, we hope to accomplish more and do better than this milestone we crossed.
Building a simple app for teaching concepts around scoring a hand of poker using functional programming. This project uses visual elements and unit testing as a way to "gamify" the learning process. A few simple components combined with the powerful and easy to use Kendo UI grid create an meaningful display of tests with data.
As a Developer Advocate for Progress I spend part of my time teaching through workshops, conference sessions and examples. I've been teaching Functional Programming techniques to C# developers for a few years and recently have started adapting that content to include JavaScript as well.
I'm currently creating examples that continue with the functional programming theme. In these examples I'll be using the game of poker to demonstrate various techniques for writing self-documenting and terse, functional code. To help visualize the data used in the examples, I decided to create a simple visual unit testing component using React. The component is part of a simple app for teaching concepts around scoring a hand of poker using functional programming.
"Why Not Just Use XYZ Framework?"
With so many great unit testing frameworks available for React it wasn't an easy decision to create yet another method of testing code. However, I really wanted to make something custom for the subject matter that didn't introduce another concept such as a unit testing framework that comes with its own learning curve. Instead I wanted something that could allow students to focus on the code used in the demo.
Connecting a Concept with a Visual
In my content I try to create visual elements that help students connect with the idea being presented. I find that playing cards are relatable since they present a real-world object. Another convenient property of playing cards is they display their values thus making them distinguishable at-a-glance.
The goal of the visual unit test is to display a hand of playing cards images along with their corresponding values. With this display, I'll include the desired poker score result, description and pass/fail value. The final result will be a project users can open using StackBlitz and begin writing code to light up the unit tests. Everything they need to get started will be ready to go out-of-the-box.
Component Details
To build the Visual Unit Test component I used React. I chose React because the topic of functional programming is often associated with React's style of development. In addition, StackBlitz offers easy templates to get started with React while providing real-time results through "Hot reloading as you type," and this provides a mechanism for giving immediate feedback to the student.
The Visual Unit Test component itself consists of a Kendo UI grid for displaying playing card images and the corresponding values used in the test. Accompanying the grid is a status bar with a description of what is being tested (i.e. "Two cards of the same value"). The status bar also shows the test result by color and text. To help students identify what's happening in the test, the output value is shown beneath the status bar.
The Kendo UI Grid
The Kendo UI grid binds to virtually any data source and offers a wide assortment of features that make an intuitive display for interacting with data. Binding data to the grid is as simple as setting the data property. For the unit tests, I'm using local playing card data stored as a JSON file which is loaded into the component's state. Once the data property is set, the grid automatically generates columns based on the data objects.
Columns can be explicitly set, allowing for full customization and further enhancing the grid display. One of the key features for this scenario was displaying a custom grid template. Using a cell template meant that I could easily display pictures of the playing cards in a grid column. Setting up a column template for the Kendo UI grid requires two simple steps. First, a grid cell component that inherits from GridCell is created. The component is then bound to the cell property of the column it will be used in.
In addition, multi-column sorting is enabled so students can customize their view of the data. Details and demos about sorting and additional features of the Kendo UI grid can be found on the Kendo UI website.
The Status Bar
Displaying the data is only one part of the visualization, and a visual pass/fail element was needed to complete the experience. To complete the visual unit test, I incorporated a stats bar component. The status bar is a simple component that uses conditional CSS styles to display the state of the unit test. Included in the status bar is the test's description, the text "pass" or "fail" and the literal string representation of the actual value being tested.
The combination of grid and status bar complete the visual unit test component. To complete the app experience the component is given test data and a test configuration.
Putting It Together
The visual unit testing app is driven by a single file which wires everything up. The test.js file marries the test data, units under test, with an array of test configurations. In this scenario I'm testing two public functions that the student is responsible for creating: getHandRank(), which scores every poker hand available in a game of five card poker, and getHighCard(), a function which must return the highest card object in a hand.
// test.js
// test data
import data from './test-data.json';
// Unit under test
import { getHandRank, getHighCard } from '../components/Scoring.js';
// An array of test configurations.
export { tests };
const tests = [
{
id: 11,
name: "1. Royal Flush",
data: data.royalFlush,
actual: getHandRank(data.royalFlush),
expected: "RoyalFlush",
description: "A straight flush including ace, king, queen, jack, and ten all in the same suit."
},
// ...more tests
]
A test configuration consists of the name, data, the actual value (the unit under test), the expected value and the description. The actual and expected values are used by the visual unit test component to determine if the test is pass/fail. Internally the visual unit test component is performing a deep-equals against the two values to produce a "passing" value. Once a pass/fail is determined, the unit test will display the corresponding color, text, and output value.
To complete the app experience, the test configurations are iterated over the visual unit test component. Using a simple map operator, the component is initialized with the a test configuration and displayed.
The application is complete and students have a project they use to practice writing functional code to complete the tests and see a visualization. Students will open the scoring.js file and be prompted to complete the two functions (or units under test) to solve for the tests provided. As the code is written in scoring.js, the visuals will update in real-time, showing which tests are passing/failing:
export { getHighCard, getHandRank }
// Use this file to complete the following functions and
// solve all of the unit tests displayed to the right.
//
// Try a functional approach. Complete all of the unit
// tests without defining a single variable.
// Test 1b. Get the highest card.
// The card with the highest value in the hand. (Deep Equals, return the full card object).
const getHighCard = function (cards) {
return;
};
// Tests 1a - 10
// Score all of the hands of poker.
const getHandRank = function(cards) {
return; // return the string "HighCard" to complete the first test.
};
Conclusion
This project uses visual elements and unit testing as a way to "gamify" the learning process. A few simple components combined with the powerful and easy to use Kendo UI grid create an meaningful display of tests with data. Using StackBlitz and React provide the perfect platform for a teaching tool for JavaScript developers. I'm excited to see how students will interact with this idea in a workshop, meetup, or webinar setting.
If you're interested in seeing the hour long version of the material, a recording is available on the Progress YouTube channel.
Try it Yourself
If you're the hands on type try out the Poker scoring app in StackBlitz and take it for a spin. To see more of what the Kendo UI data grid and our other React compoents has to offer, start a 30 day free trial of Kendo UI.
What do you think of StackBlitz, Kendo UI, or the idea of using unit tests and visualizations to teach code techniques? Please sound off in the comments below, I'd love to hear from you.
Learn the top six line of business features in a report management solution that can support any business.
Telerik Report Serveris a powerful .NET report management solution powered by Telerik Reporting, which helps transform raw data into actionable business insights and then store or distribute these insights within the business. A special emphasis is placed on creating reports in a user-friendly manner, storing reports on-premises and quickly distributing reports to people with appropriate user access.
Featuring an intuitive Standalone Report Designer, a powerful API and a single report repository with user access, Report Server allows enterprises to create, manage and store reports with ease, as well schedule and distribute them with different levels of management authorization.
Telerik Report Server is fully-packed with a great variety of Line of Business (LoB) features that ensure seamless and timely advanced report management. Let’s review six of our favorite LoB features in more detail.
Report Scheduling and Delivery
Many businesses operate with a huge reporting load on a daily basis and need automated report scheduling. Report Server lets you schedule and run reports either all at once or on preliminary scheduled intervals. Once scheduled, the reports can automatically be delivered to your end users via email in your choice of formats (PDF, Excel or HTML), printed or saved locally for further actions. Your end users don’t need a license to receive reports and there is no limit to the number of users you can reach. There is also no limit to the number of tasks you can schedule.
Report Server supports upward of 15+ formats for presenting reports, including Word, Excel, PDF, PPT, Image and CSV.
User Management, Authentication and Authorization
Report Server provides flexible solutions for user management and authentication with many hierarchical levels of management. Access to reports is limited to registered users. Administrators can easily create and manage user roles with predefined permissions, add new licensed users and assign them to user roles or set individual user permissions.
Active Directory Integration
Report Server provides support for the Active Directory Federation Service (AD FS) authentication provider, enabling your users to authenticate using their Windows domain or Azure AD credentials. The integration is quick and seamless, giving you full control in assigning roles, whether it’s administrator or read-only.
Data Alerts and Email Notifications
With Report Server you can stay informed about the most pertinent report data, regardless of how much information you collect. You can be alerted and notified via e-mails when any changes have occurred to take informed business decisions.
Viewing Reports
Report Server lets you deliver interactive reports directly to your business application (responsive HTML5, Angular and .NET web apps, Azure, WPF and WinForms desktop apps). The reports can be viewed directly in one of the six supplied report viewers, where we guarantee a uniform look regardless of the platform (web, mobile, desktop). The report viewer controls require a Telerik Reporting or Telerik DevCraft Ultimate license. You do not need any additional licenses for viewing reports embedded in your application.
White-Labeling
You can easily rebrand Report Server with your own brand to boost your brand visibility, customer satisfaction and loyalty with a fully developed, field-tested solution that’s updated regularly.
Get Started Today
Start managing your reports today. Get a free trial of Telerik Report Server and don’t forget that the free trial comes with free support.
You can get Report Server as standalone product or with Telerik DevCraft Ultimate. Make sure you’ve downloaded a trial or learn more about DevCraft bundles. DevCraft gives you access to all the toolsets, allowing you to say “no” to ugly apps for the desktop, web, or mobile.
New Release Coming Soon
Stay tuned for some new features coming very soon as well - our next release is coming on September 12th!
If you've been in the Microsoft developer space for even a minute, you know that they are undeniably all about Azure and DevOps. And if you hadn't realized that, today's announcement introducing Azure DevOps should have solidified it for you.
You may have seen Microsoft's announcement of Azure DevOps this morning. If you didn't, you should really check it out. Let's explore what this means for you, the Microsoft developer.
What is Azure DevOps and Why Should You Care?
In the simplest terms, Azure DevOps is the evolution of VSTS (Visual Studio Team Services). It is the result of years of using their own tools and developing a process for building and delivering products in an efficient and effective way. If you want to learn more about their cloud and DevOps journey, check out their DevOps Resource Center and particularly Lori Lamkin's article entitled Moving to Cloud Cadence.
But it's more than that, too. I think of it as VSTS, TFS (Team Foundation Server) and Azure all rolled up into one, with some improvements and a few extras. With Azure DevOps you get Azure Boards, Azure Repos, Azure Pipelines, Azure Test Plans and Azure Artifacts.
Probably one of the more significant "extras" was the introduction of Azure Pipelines. With Azure Pipelines, you get cloud-hosted pipelines for Linux, Windows and macOS. You can build, test and deploy any language or platform to any cloud. What's more, every OSS project will get Azure Pipelines unlimited build minutes. When they say this isn't your grandpa's Microsoft, they aren't kidding.
Also, announced (and fairly significant) is the new VS Code GitHub Pull Request Extension in the Azure Repos. The PR extension enables collaborative pull requests in VS Code.
Azure DevOps, Telerik and Kendo UI
Progress has a long history with Microsoft - particularly when it comes to our Telerik tools. We have supported VSTS and TFS integration with Telerik Test Studio and are evaluating Azure DevOps compatibility. You can always reference our current documentation for information about our VSTS and TFS integration and we will provide an update on Azure DevOps in the near future.
Along the lines of integration, it bears mentioning that the Telerik and Kendo UI components and controls are Azure infused. We have a host of articles and documentation to guide you through a number of scenarios, including:
As you can see, we love talking about Azure, and we have plenty more to say, but we'll save that for a different blog post.
Learn More about Azure DevOps
There are a lot of ways to learn more about Azure DevOps - here are a few of our recommended events and resources to get you started.
Keynotes and Workshops
You can tune in to the Azure DevOps Keynote with Jamie Cool, Donovan Brown and special guests on Tuesday, September 11th at 8 a.m. PT on Ch. 9. Also, plan to join the Azure DevOps "Six Hour Mixer Workshop + Q&A" that Jeff Fritz on his Mixer and Twitch channels on Monday, September 17 from 8:30 a.m. - 2:30 p.m. PT. You can save-the-date and watch both live streams on the events page. There you’ll also find additional on-demand videos and other resources to help get you started.
.NET Conf
If .NET Conf was not on your calendar, it should be. It kicks off on Sept 12 and there is a session at 2:00 p.m. PT on the 13th called "DevOps for .NET Teams with VSTS" (although the title may change after today's announcement ). The conference is a free three-day online event. You can learn more about how to tune in here.
Our Partners
Some of our partners have announcements and information to share as well. Make sure you check out blog posts from Mobilize.net and PreEmptive Solutions. Both organizations have a history deeply rooted in the Microsoft space and provide interesting perspectives on the news announced today. Mobilize is releasing VBUC 8.1 with Azure DevOps integration, and PreEmptive is announcing Azure DevOps compatibility with Dotfuscator (both the free community edition and the full version). Make sure you check out their blog posts for more details.
In this blog, we learn how to emit events from child components in Vue, as well as how to emit from nested child components. We’ll do all this while avoiding a common anti-pattern that new Vue developers often make.
A core concept behind a lot of modern JavaScript frameworks and libraries is the ability to encapsulate data and UI inside modular, reusable components. This is great when it comes to helping a developer avoid repeating chunks of code throughout an application (or even across apps). However, while the ability to contain functionality inside of a component is great, a component will often need ways to be able to communicate with the outside world or, more specifically, with other components.
We're able to send data down from a parent component via props (short for properties). This is usually a fairly straightforward concept to grasp. But what about sending data from a child component back up to its parent?
In Vue, I initially had a bit of difficulty figuring out how to do this—mainly because I feel that Vue's documentation doesn't cover this as well or as thoroughly as it could (which is a shame, because Vue's docs often excel in most other areas).
After a lot of Googling (and trial and error), I ended up figuring out a way to send data upwards from child to parent, but after a while, I found out from a fellow developer that I had been doing this in completely the wrong way—it worked, but I was committing a cardinal sin in the world of anti-patterns.
With all of this in mind, we're going to write an article that hopefully helps future Vue developers find a clear answer for "how to emit data in Vue" a little easier, while building a neat little Shopping Cart app along the way.
Setup
We'll be using the Vue CLI to quickly get some boilerplate code set up, as well as all of the other nice things it brings, such as hot-module-reloading, auto-compiling, etc. Don't worry if any of this goes over your head, just get used to using it because it's great!
We'll try not to spend too much time going through any further set-up, as the focus here is to show you how to emit data, rather than showing you a step-by-step set-up of our Shopping Cart app. By all means, feel free to try and build one yourself though with the code examples littered throughout the article.
Visit cli.vuejs.org for more info on how to install and use Vue CLI.
A definition from Cambridge Dictionary tells us that the formal definition of "emit" is "to send out a beam, noise, smell or gas." Don't worry, our app won't be emitting any strange smells or gases! In our case, the aim is to "emit" a signal—a signal from a child component to notify a parent component that an event has taken place (for example, a click event). Typically, the parent component will then perform some sort of action, such as the execution of a function.
How to Emit from a Child Component
Let's take a quick look at what it is that we want to emit.
Whenever a user clicks on any of the Add To Cart buttons, we want the item in question to be added to our cart. This sounds simple enough. What we need to also remember is that, with a component-based app, each item in the shop is its own component (the name of the component here is Shop-Item). When we click the button inside of Shop-Item.vue, it needs to emit data back to its parent in order for the cart to be updated.
Let's first take a look at the code that achieves this.
Let's break this down further and just show the highlighted parts and explain how the click of a button sets off a chain of events.
First, we have a button in Shop-Item.vue:
<button class="Button" @click="addToCart(item)">Add To Cart</button>
Each item in the shop (Banana, Orange, Apple) has one of these buttons. When it gets clicked, our @click="addToCart(item) event listener is triggered. You can see that it takes the item in as a parameter (this is the entire item object which has been passed into <Shop-Item> as a prop.) When the button is clicked, it triggers the addToCart function:
We see that this function fires this.$emit. What does that even mean? Well, emit simply sends a signal. In this case, the signal is 'update cart', which is sent in the form of a string. So essentially, this.$emit takes a string as its first parameter. It can also accept a second parameter, which will usually take the form of some piece of data that we want to send along with it. This could be another string, an integer, a variable, an array, or, in our case, an object.
But then how does sending that string of "update-cart" notify our parent component that the Shopping Cart needs to be updated? Well, let's look at the third piece of the jigsaw.
When we add our <shop-item> tag in App.vue, we also add a custom event listener onto it that listens out for update-cart. In fact, it actually looks similar to our @click event listener that was on the 'Add To Cart' buttons.
<shop-item v-for="item in this.items"
:item="item"
:key="item.id"
@update-cart="updateCart">
</shop-item>
We see here that our custom event listener is waiting for the update-cart event to be fired. And how does it know when this happens? When the string 'update-cart' is emitted from inside the Shop-Item.vue!
The final bit is to now see what happens when this @update-cart event listener triggers the updateCart function:
This simply takes an event parameter and pushes it into the this.cart array. The event that it takes is simply the item that we initially put in as the second parameter when we called this.$emit. You can also see that this.total is also updated to return the result of the this.shoppingCartTotal function (check out the Github repository for more info on how it does this).
And that is how we emit from a child component back to the parent component. We can even see this take place inside of Vue Developer Tools (an essential piece of kit if you use Chrome and you're working with Vue components). When the "Add To Cart" button is pressed for the Banana, all of the info in the screenshot below is rendered:
This is the output in Vue DevTools after we click the Banana's "Add To Cart" button.
Awesome, we now know how to correctly emit from a child component back to the parent!
But what if we have lots of sub components? What if we have child components sitting inside of other child components? How do we emit a message all the way back up to the parent (or grandparent, if that makes it easier for you to visualize)? Let's tackle that next!
How to Emit From a Nested Child Component (i.e. Grandchild to Grandparent)
Okay, so taking the same example that we used when emitting from child up to parent, we're going to take this one step further. In our finished code, we actually had the "Add To Cart" button as its own component, which sits inside of Shop-Item.vue (before we just had the button sitting inside of the Shop-Item component as a regular button, but now we've turned it into a reusable component).
To give you a crude diagram of this structure, see below:
App.vue< Shop-Item.vue< Shop-Button-Add.vue
Shop-Button-Add.vue is nested inside of Shop-Item.vue, which is nested inside of App.vue.
What we need to do here is figure out a way to emit an event from Shop-Button-Add.vue up to Shop-Item.vue, which then triggers an emit event from Shop-Item.vue up to App.vue. Sounds a bit complicated, but it's actually easier than you'd think.
Inside of Shop-Item.vue, we attach a @button-clicked listener onto the <shop-button-add> tag:
<shop-button-add
@button-clicked="addToCart(item)"
:item="item">
<p>Add To Cart</p>
</shop-button-add>
We see here that we're also passing in the item object as a parameter (exactly the same as what we did in our previous example). This @button-clicked event listener fires the following function in the same file:
Which pushes the item object into the cart. And that's how we emit from nested components!
But what about super-deeply nested components (eg. Great-Great-Great-Great-Grandchild to Great-Great-Great-Great-Grandparent)?
Well, we have three options here:
You could emit your event all the way back up the chain (although this can start to get quite messy if you're having to emit any further than grandchild to grandparent).
You could use a dedicated state management system such as Vuex, which can help to simplify the process of emitting from deeply nested components. I'd certainly recommend this route and we'll be definitely look to cover this in a future post!
Or you could use something known as a Global Event Bus. You can think of this as implementing your own simplified version of a state management system such as Vuex. However, it is worth noting that Vue's core team generally advises against the use of Global Event Buses in favor of something more robust, such as Vuex. We won't go into the reasons for this any further here, but it's certainly worth researching further if this is something you are considering in your app.
Anti-Pattern Culprits
The reason why it's really important to get our emit event listeners set up properly is because we are ultimately trying to encapsulate our components as best as possible. In the case of a button, the more reusable we can make it, the more transportable it becomes. If our button emits a simple 'button-clicked' string, we can then decide what we want that emit event to trigger on a per application basis—we could even have it trigger different things inside of the same application, based on where we decide to use it.
As mentioned at the start of this article, when I first figured out how to emit events, I ended up using the following two syntaxes: this.$parent.$emit and this.$root.$emit.
Although they look similar to this.$emit, they're different in the sense that the this.$parent.$emit emits the event inside of the parent component, while this.$root.$emit emits the event inside of the root component (which in our example would have been App.vue).
So to expand on this a little, if we take our Shop-Button-Add component, this emits a signal upward to Shop-Item, through the use of this.$emit. However, if we opted to use this.$parent.$emit, this will actually be telling Shop-Item to emit an event instead. Effectively, the Shop-Button-Add is now telling its parent Shop-Item to emit an event, rather than following the proper pattern of event emitting.
It can seem a little bit confusing to wrap your head around sometimes, and, to be fair, in our example it may actually make sense to skip a step and go for this.$parent.$emit. However, the problem here is that our Shop-Button-Add is no longer truly encapsulated, because it now relies on always being inside of Shop-Item for it to work. Again, this may seem okay in the case of our simple Shopping Cart application, but what if we wanted to generalize our button a bit and simply make it a Shop-Button that gets used across our application for lots of different things, such as increasing/decreasing quantities, emptying our cart, etc. It would get very messy and very confusing very fast!
To quickly summarise this.$parent and this.$root:
this.$emit dispatches an event to its parent component
this.$parent gives you a reference to the parent component
this.$root gives you a reference to the root component
this.$parent.$emit will make the parent dispatch the event to its parent
this.$root.$emit will make the root dispatch the event to itself
Conclusion
And there we have it! We now know how to successfully emit events and data from child components, and even nested child components, all the way back to the parent. We have also learned about the existence of this.$parent and this.$root, but why they should be avoided and are considered to cause an anti-pattern. Following on, I highly recommend listening to this episode of Full Stack Radio, where Chris Fritz, a member of the Vue Core Team, talks further about common anti-patterns he has noticed being used out in the wild.
If you found this useful, be sure to share, and feel free to reach out to me on Twitter to discuss further.
The way you structure a dashboard makes a critical difference in how effective it will be. Having the right data is important, but to the viewer, it is all about the organization and presentation of the data. In this article, we'll take a look at a few different ways to organize a dashboard to meet the user's requirements.
Dashboard
noun
1. (in an automobile or similar vehicle) a panel beneath the front window having various gauges and accessories for the use of the driver; instrument panel.
2. Computers.
a. a user interface or web page that gives a current summary, usually in graphic, easy-to-read form, of key information relating to progress and performance, especially of a business or website:
b. a web page or portal that provides links to key information and useful tools on a website:
3. a board or panel at the front of an open carriage or the like to protect the occupants from mud or dirt cast up by the hoofs of the animals drawing the vehicle.
When we hear the word “dashboard”, we all have a pretty good idea of what it means, or at least we think we do. It’s the place we go to see how well things are going. In a car, it tells us how fast we are going, some key factors about the engine, the temperature outside and more. For most of us in the web world, this means a web page that might be implemented in basic HTML and CSS. Or it could be a web app created using a framework like React, Angular or Vue, plus sophisticated UI components like Kendo UI. Or it could be something implemented using a tool like Tableau.
No matter what type of technology you are using, the real critical decision is how you are going to display your data. The technology you use is just an implementation detail, although it might matter a good deal to the person or team that has to implement it. But to the user, it is all about the organization of the data. Does it tell a story, or just drop a lot of random data on the user? Does it guide to user to a conclusion, or require the user to figure out what it all means by themselves? Or does it force a narrative on the user that perhaps they are not looking for?
There is no right or wrong answer to how you create a dashboard, it is only right or wrong when viewed against the objectives of the user. But whatever the user’s requirements are, the dashboard should conform to that requirement and present the data in a way that helps meet the goals. With that in mind, let’s take a look at a few different ways to organize a dashboard to meet those requirements.
Key Factors in Visual Narrative
Creating a dashboard means creating a story. You want to say something to your audience, to convey some information beyond just splashing a lot of data on the screen. One place we can take some inspiration from is film. A complex dashboard shows more than one set of information, although all of the information should be related somehow, in the same way that a movie is composed of multiple scenes that might all be different, but all add to the basic story. So instead of individual screens, or data visualizations, let’s think of each one as a “scene” that tells us part of the story.
When we are concerned with creating multiple scenes and connecting them somehow, there are three main elements we want to consider:
Structure
Highlight
Transition
The structure of each scene is important to present the data in a useful and intelligent way. Within each scene, we will want to consider what and how to highlight specific data. We might use colors, we might use shapes—something to help the key data (lead actors) stand out from the rest of the data in the scene (the supporting cast). Finally, we want to consider how to transition from one scene to another in a way that helps with our narrative story. In a simplistic example, if we have a “yes” button in green in one scene, we don’t want to have a green button in the same location in another scene that is now a “no." Carrying themes and styles through from one scene to another helps keep the viewer properly oriented.
The Narrative Spectrum
Having taken a quick look at how to create effective scenes, let’s see how we connect all of these individual scenes into our dashboard. This is where we begin to expand beyond our simple movie analogy and add in an element of interactivity. We can see three basic formats of a flow from scene-to-scene. These are:
Author-driven
Reader-driven
Hybrid
Author-driven is our basic movie style. The viewer is presented with a set of scenes in a specific sequence and while they may be able to control the execution, or “playback”, scene 1 is always followed by scene 2, which is always followed by scene 3, and so on. This is useful when there is a specific narrative that we want to present to the viewer, and it is important to view the scenes in a specific order to display a series of cause-and-effect scenes.
Reader-driven let’s the viewer select the order of scenes to be viewed. This can be useful when there is not specific order implied to the individual scenes, and they are relatively independent to each other but with some common connection.
There will be times when we might want to do a little of both—show a sequence of scenes to tell a specific narrative, and combine that with an ability to direct the flow of the rest of the scenes. We might want to show a sequence of scenes first (a “mini movie”) and then let the user select where to go next, or we might let the user select where to go first but then show a fixed sequence of scenes for each selection. There are a variety of ways you can combine these two approaches.
Types of Dashboards
Now let’s take a look at the three specific types of dashboards that match these three forms of narrative. These are:
The Slideshow
The Drill Down
The Martini Glass
The Slideshow is our author-driven format and is basically a movie where we want to tell a specific narrative sequence. For example, in once scene we might want to show the number of environmental laws impacting waste discharge into the Cuyahoga river in Ohio. We could show the amount of pollution in the Cuyahoga River over time in another scene. We could show some detail in this scene, listing types and amount of pollution. In a third scene, we could chart out the dates, severity, duration and damage of fires on the river. Yes, I said “on” the river—it had been so polluted with flammable, oily waste that on several occasions, the river actually caught fire. The last time was in 1969 and it sparked (no pun intended) a range of environmental protection laws and environmental protection agencies. The river is still polluted, but not nearly as much, and it hasn’t caught on fire since then.
The Drill Down is our view-driven narrative format and is most useful when the “story” might vary. For example, we might want to track our investments and see how they are all doing but with the option of diving into each type for more information. We might have an initial scene that shows the results of our farm investments, our gold investments, and our art investments. We could view the results for each area and select one of these three areas to dive into for more detail. These would be very different scenes because the data displayed on each individual scene would be a completely different organization.
On the farm investments scene, we might want to learn more about the weather, international tariffs on agriculture, farm labor, etc. On the art investments scene, we might be interested to find out more about disposable income in the wealthy, recent art sales, museum endowments which cause art acquisitions, etc. The Gold scene might focus on jewelry sales, mining operations, etc. These are three very different sets of data and would be shown in very different scenes, but which scene to view and in what order (or if they are even viewed at all) would be up to the viewer.
My favorite format is the Martini Glass (largely because of the name) which is our hybrid form and is basically a slideshow followed by a drill-down. Why is it called a martini glass? Take a martini glass, and turn it on its side. You have a narrow stem on the left (the author-driven part) followed by the wide triangle of the glass (the user-driven part). This gives us a chance to tell a story and set-up the situation but then let the viewer explore on their own. How long the “stem” (author-directed) is, and how wide the bowl is (viewer-directed) will depend on the story and the data that you are trying to convey. And, of course, you need to decide on whether to use Gin or Vodka in the martini.
If we go back to our fiery river example from the slideshow, we could expand that to become a martini style dashboard by adding in a back-end with more information. We could still tell our story of regulation and pollution and fires as a sequence (the stem of the glass) but then provide a drill-down section on river fires that let’s the viewer explore property damage, fire-fighting techniques for river fires (I’m guessing you can’t just pour water on it…), injuries, etc. as a result of the fires.
Summary
Slideshow, Drill Down, and Martini Glass: three basic organizational formats to drive your narrative. Of course, you can mix and match and customize or create more complicated shapes, but this gives you a good starting point and a set of criteria to determine what format will best suite your individual requirements.
The next step after deciding on the structure of your dashboard is to determine what types of individual data display elements you want to use—charts, tables, gauges, etc. You can read more about choosing the right chart in the blog “Deliver a Better User Experience by Using the Right Charts”. For more information on individual data display components, take a look at the ones provided by a professional library of data display components like Kendo UI.
User experience talk has surged recently, even in development circles. Yet despite this trend, most apps, websites and software remain monstrously annoying, frustrating and hard to use.
I recently returned from a swanky development conference, chock-full of people who've forgotten more about advanced code than I'll ever hope to know. Augmented reality to the left of me, security frameworks to the right.
That's what I signed up for. I expected big data and sophisticated algorithms. I did not expect the recurring themes of user experience (UX) and customer experience (CX) that dominated all the keynotes and nearly every presentation.
"Enhancing user experience" was openly proclaimed as the key to nearly everything. I heard terms like "users" and "usability" so much I wondered if I had wandered into a UX conference. One keynoter even spoke of "intuitability," apparently an actual word.
Does this mean we've turned a corner? Have development firms embraced user-centered design? Are they hiring UX professionals and making digital products differently? Will apps, sites and software become less horrible and maddening?
Maybe.
To be sure, some of the tools at the conference felt easy to use and behaved less…developer-y than expected. There's hope.
However, most interfaces still exhibited clear signs of a developer-centric approach. Interaction seemed subservient to functionality and oblivious to UX best practices. As a result, some products felt eerily as if they had been made solely by developers. Of course, they probably were.
Attendees talked about users, but they did so as if by rote. "We did this for the users." "The users will appreciate this." "This will enhance the (sigh) user experience." After a while, it all sounded like something ambitious chat bots might say. I didn't get the sense that many teams were engaging, researching or testing actual users.
Turning Words Into Action
Why do we talk like UX is more important than oxygen but continue to treat it as an afterthought?
If our actions matched our words, the world would be awash in easy-to-use apps, sites and software. And we all know that is, to put it mildly, not the case.
Are we indulging in mere lip service and buzzwords? After all, "experience" seems to be all the rage. Maybe next year we'll say something else. "Story," perhaps? Wait, that's already been done.
I prefer optimism. The clarion call for better user experiences is sincere. Development organizations are coming to the earnest realization that strong user experiences mean strong digital products. This realization simply hasn't yet permeated real-world development processes. The tsunami of experience talk is aspirational, but we lag in follow-through. This stands to reason. Changing entrenched methods is uncomfortable, difficult and slow-going. "Enhancing user experience" is easy to say but hard to do, especially if you're not quite sure how to go about it.
The trends are positive, but color me impatient. If words don't lead to action, what use are they? Technological evolution means little if users continue to face the same impediments time and time again. Following old methods will surely yield the same old results. When will development firms transition from talking to doing?
It's time to stop talking about user experience and start doing it.
React is great at rendering out components and boosting performance, but it lacks any formal pattern around state and data retrieval. Redux can help address some of the issues that arise as your web application grows in size.
So, you've started a new project and built some React components. You don't have to get very far before needing to solve the problem of how to manage your frontend data. This isn't a particularly exciting problem to solve, but it's a necessity if you want to build a successful web app that is performant and has room to scale and grow.
React boasts excellent performance due to its hierarchical approach to data storage and rendering web elements. Unfortunately, this very benefit makes data management complicated and can quickly lead to code bloat. This is where Redux can help. Redux manages the data between components by existing separately from the React hierarchy.
Redux's architecture is built around unidirectional data flow, which pairs nicely with React's rendering pattern. Since the data flow is one direction, we don't have to worry about side effects and can trust that the component will render or re-render in a predictable, React way.
Most of the community agrees that Redux does an effective job of solving React's data management issues, but there are differing opinions on when you should implement it. One camp believes you shouldn't install Redux until you find yourself with a real data management problem. The second camp argues that, because you will likely need a state management tool at some point in the development of your app, you should use Redux from the beginning. Neither camp is necessarily right or wrong, but I definitely fall into the second, and here's the short answer why: It's is easier to build good patterns at the beginning of a project than it is to change your data management paradigm—and, by extension, your development patterns—after the app has grown. It is not always easy to see your project getting too complicated until it's too late. Nonetheless, no matter which camp you fall into, you will be able to use some of the patterns below, so let's jump in!
Below, I've built out a simple contact manager in React. You'll notice that I've stripped out some of the content of the functions, but don't worry: You can check out the code and see all the details at the end. For now, let's focus on structure.
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The Contacts component will display a list of contacts that the user can view and update if necessary. If this is the only functionality we plan to build, then our app definitely doesn't need Redux. But let's say we know that we're going to add a calendar feature, contact sharing, authentication and, if all goes well, integration with other messaging clients like Skype and Facebook Messenger. With features like these on the roadmap, we'll have lots of new functionality to build, and several of our new pages will need to have access to the same core data. Let's set up Redux now to avoid reworking it later.
First, we'll need to add a few new dependencies to our project:
npm install redux react-redux redux-thunk
React-Redux is the Redux binding for React. Redux Thunk will enable us to use promises in our actions instead of returning pure JSON objects.
Next, we'll need to modify index.js by creating the Redux store and adding the Redux Provider component. The Provider will make our Redux store accessible to all child components.
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'; // redux bindings for react
import thunk from 'redux-thunk'; // to use promises for asynchronous actions
import { createStore, applyMiddleware, compose } from 'redux'; // to create the store and middleware
import reducers from './reducers/index.js';
const middleware = [thunk];
const store = createStore(reducers, {}, compose(applyMiddleware(...middleware)));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Now we're ready to start connecting components to the Redux store. We'll start in App.js by mapping actions to get started. We know that when our app loads, we'll want to dispatch an action that fetches and loads all of our existing contacts.
A quick note about dispatch: Dispatching is Redux's method for changing state. It is important to note that only actions called with Dispatch can modify state within Redux.
In order to do this, we'll have the componentDidMount lifecycle method call getContacts. The reason we are calling getContacts on App.js as opposed to inside Contact.js is that Contacts are global, so no matter what component gets called, we always want to have contacts loaded.
Now that App.js is connected, we can switch our focus to Contacts.js. We start with adding mapStateToProps and mapDispatchToProps, and then connecting them via the connect HOC (Higher Order Component).
Up to this point, Contacts.js is the first component to implement both mapStateToProps and mapDispatchToProps. Redux passes both state and the current component's props to the mapStateToProps function. This allows for retrieval and mapping of data to the current component's props. mapDispatchToProps allows us to send actions to Redux to store data or make HTTP calls that we have defined in actions.
As a side note, we have implemented mapStateToProps by including it as a static method inside of the component. This is a non-standard method of implementing Redux functions. But, one of the key benefits is that this allows mapStateToProps be unit-testable without explicitly exporting it.
We introduced the concept of actions in our discussion of the ConnectedContacts component, but we didn't really talk about them. So let's do that now. The best way to think of an action is any operation that can modify Redux state. The most bulk of these actions will be HTTP calls, calls to retrieve data from local storage, or even calls to read from cookies. The reason writing good, clear actions is essential to the creation of a good web app is that it encourages you to modularize your code in a way that facilitates reuse of code between components and allows your code to be self-documenting. That said, let's take a look at our actions.
In Redux, all actions must return an object with a type property. Thanks to the Redux-Thunk middleware, we can perform more complex operations, like asynchronous calls, within a function that dispatches an action. This allows us to move HTTP calls from components into actions and keep our component code clean.
Actions don't modify Redux state directly, though. That's the reducer's job. The type value that we passed from the action tells the reducer exactly what to do. The reducer then handles the payload passed by the action by storing the data in a specified shape. We're not going to get into the specifics of state shape or data access here; it's a pretty lengthy topic and would require a blog post all its own.
Throughout this post, I've written about "modifying" state. In truth, this is a bit of a misnomer. We never actually want to modify the Redux state directly. Instead, we always want to return a modified copy of the state tree. This concept of immutable state is a crucial—and often overlooked—detail when writing reducers.
With all the pieces in place, we have laid the foundation for our app to use Redux to manage state. Because Redux allows you to have access to the entire state tree from any component in your project, it's easy to want to connect every component. This is a mistake. One of the most significant downsides to using Redux for all storage is the performance issues from having all components re-render based on global state. A good rule of thumb is that you want to have a single connected component with many unconnected components below the container level. It's the container's job to pass props to these unconnected components, just as you would in a typical React app. There are always exceptions, but you should strive to keep your components from being connected until it makes sense to connect them.
At this point, I hope you feel that Redux is not an overly complicated thing to implement and you feel comfortable throwing Redux into the simplest of web apps. Even if there is not a ton of data to manage, it helps break apart code into separate pieces that allows for more readable, maintainable code.
For More on React
For more information on React, check out All Things React, which features current updates, resources, tips and techniques, history, and other useful React information, including links to the Kendo UI for React component library.
The Telerik and Kendo UI R3 2018 release is now live, bringing over 20 new modern UI components as well as new themes across the .NET and JavaScript frameworks. Also, we are proud to be the first component vendor to support WCAG 2.1 standard compliance.
I'm pleased to announce that our 2018 Progress Telerik and Progress Kendo UI R3 releases are now live! You can now upgrade to the latest version from your account or download a trial to see the latest features. While this blog will cover the highlights across the .NET and JavaScript product lines, you can also see the release in action by registering for our Telerik and Kendo UI release webinars coming up in a few weeks.
Read on to see how the latest release helps you get more from your .NET and JavaScript apps.
What's New for Web Developers (ASP.NET AJAX/MVC/Core jQuery, Angular, React, Vue)
The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the internet. We closely watched the work done on the WCAG 2.1 guideline and as soon as the guideline was ready, our team jumped on it.
We've implemented the standards in our Kendo UI tooling, and you can now create accessible web apps that are up to the latest standards right out of the box, without writing any additional code. This is a huge productivity boost for anyone wishing to implement the guideline, and in cases of government-related business, you are likely required to adhere to them shortly after its publication. Applications built with components adhering to WCAG 2.1 guidelines will not only be accessible to people with disabilities, but also to users of all kinds of devices and interfaces: desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.
In addition, we have added several controls and performance improvements across our web tooling portfolio, including:
ArcGauge and a new Chat feature for ASP.NET MVC, ASP.NET Core, JSP and PHP
Scheduler and Notification components as well as Chart features for Angular
Stock Chart, Sparkline Chart and Dialog components and Grid features for React
Material-inspired theme for ASP.NET MVC and ASP.NET Core
Feature enhancements for HTML Charts, Drawing, Gantt, PDF Export and Spreadsheet for ASP.NET AJAX
And of course, all our docs and sample apps have been updated to reflect these new additions, so make sure you take them for a spin.
What's New for Desktop Developers (WPF, WinForms, UWP)
Who said a PC can’t look like a Mac? Well, it probably can’t fully, but if you want to have your Windows app look a little more like something that’s been developed for a Mac, you can in this release. We have added yet another theme to for developing modern-looking apps—a Mac-inspired Crystal theme. In addition to the new theme, we added:
MultiColumnComboBox control and selection support for the Image Editor
The Xamarin suite keeps on growing in terms of number of controls—now up to nearly 80 controls for developing on mobile with Xamarin.iOS, Xamarin.Android and Xamarin Forms. The new additions as of this release are:
Built-in login, authentication and app feedback screens
Expander, Accordion, Financial and Donut Charts for the charting component
Border and Checkbox as well as scheduling features for the Calendar control
The R3 2018 release will include pie charts data consolidation, improved scheduled tasks and data alerts (with email report from the report viewers as well as delivery of batch reports), and localization of the web management app. And, most exciting of all, the brand new PDF/A export feature.
While we support fifteen different export options such as Excel, Word, etc., the most popular one is PDF. The current release adds support for the PDF/A ISO-standardized version of this format, which is specialized for use in the archiving and long-term preservation of electronic documents. It is self-contained in terms of the needed assets (e.g. fonts, encryptions, annotations), ensuring that the document will look exactly as-is on any machine the report renders on.
The R3 2018 release of JustMock will include the support of the C# 7 features "ref return values and ref locals," "local functions" as well as "named parameters" and mocking of non-public property setters.
What’s New in Telerik Test Studio Dev Edition
In April 2018, we launched an automated testing solution for .NET developers. With the R3 release, we debut new Telerik and Kendo UI for jQuery and Angular translators for IE, Chrome and Firefox in Telerik Test Studio Dev Edition.
What's Up with the DevCraft Bundle
Our DevCraft bundles deliver all our .NET and JavaScript tools to you in one simple package. While this is not necessarily a part of the release, this year we have significantly increased the value of our DevCraft bundles by adding Report Server, Test Studio Developer Edition and Virtual Classroom (more than 30 hours of on-demand product training that is refreshed with every release). With these additions, we hope to do even more to help you continue to ship quality software on time.
The R3 release for Kendo UI is here, and we've got updates across jQuery, Angular, React and Vue to share with you. Catch up on everything that's new - there's a lot!
The start of the fall season here in the northeast of the USA is always an exciting time. We have the leaves changing over from the luscious green of spring and summer to the vibrant orange and yellows this area is known for. The temperature starts becoming bearable, we put pumpkin spice in absolutely everything and most exciting of all: we have the R3 release of Kendo UI!
Kendo UI is very interesting to write about now that we cover UI component libraries for jQuery, Angular, React and Vue.js. So many new components and new features to talk about! The last few releases I've created this mega-blog with absolutely everything released with Kendo UI highlighted, which could be a bit tricky to navigate. So, with R3 2018 I'll be using this blog post to cover highlights of the release for each of these products and then also release some longer blog posts for each framework - stay tuned as those will come tomorrow! As they are released I'll update this post with some links to help with navigation as well.
Just to make things easy, here's a quick table of contents to navigate you to the particular framework(s) you might be interested in.
The first thing I want to highlight for the jQuery component library is something that I find incredibly important: accessibility. With R3 2018 Kendo UI is fully compatible with the new WCAG 2.1 standard. Accessibility compliance is one of the main focuses with the Kendo UI library as all of our components are accessible out-of-the-box. While the move from WCAG 2.0 to 2.1 as a standard only happened at the end of June, we wanted to ensure that our next official release was compatible with this new standard, so here we are! This makes Kendo UI one of the few, if not the only, UI library compatible with this new accessibility standard.
New jQuery Components
A big effort that the Kendo UI team has focused on over the last couple of releases is to ensure we are taking care of the most-requested items in our feedback portal, which has mainly come from the addition of new DropDown components like the DropDownTree last release (R2 2018).
With R3 2018 we tackle yet another important component: a ComboBox that contains a Grid or table structure. This is why I'm excited to introduce the new MultiColumnComboBox component! This gives developers an intuitive way to bind to a list of data and have each data item display multiple values across however many columns may be needed. Of course, filtering/searching can easily be done by just typing in the text input of the component.
Additionally, we wanted to expand on our list of available Data Visualization components by introducing the ArcGauge widget. This is perfect for scenarios where you want a simple, effective and stylish way to showcase a value or percentage of something:
Major TreeList Updates
Many of you are probably aware of the TreeList component, but just in case the quick tl;dr is the component provides a tree-like hierarchy structure with the column structure of a grid, giving homogenous data a nice way to align columns as items are expanded.
Of course, this means that there are plenty of Grid features that would be a natural fit with the component, so as a part of the R3 2018 release the Kendo UI TreeList now has:
Of course, it really wouldn't be a release with something added to our most popular component: the Grid . Here is a quick list of the features we added for this release:
Group Summaries now available in Group Header (previously a tedious and manual template process)
Updates to responsive behaviors (even more suitable for a PWA!)
API Added: Update column width programmatically
Another exciting component that we added an important feature to is the Conversational UI component. Specifically we added the new Toolbar feature that gives users additional ways to interact with their chat interface with items like images and voice. Instead of purely typing text you can now offer your users the ability to upload images and record voice, among a few other items.
Material Theme Comes to jQuery
We initially had planned on adding the Material theme to our jQuery components with the last release but unfortunately had to push things out a bit to ensure that the full suite of components were themed - there are quite a few of them after all!
Well, the long wait is finally over as I'm happy to say that with the R3 2018 release we have the Material Theme ready for the jQuery suite!
AngularJS 1.7.x Support
Something that might have snuck by a few people is that AngularJS released 1.7.x during the summer as a part of their way to continue to support AngularJS 1.x, although this is the last significant release. As our support for AngularJS 1.x comes from the jQuery components I wanted to mention that we support this latest version of AngularJS for the folks that need the latest and greatest within Kendo UI for their AngularJS apps.
Updates to the Native React UI Components
Boy do I have a lot of updates for the native React UI components! As this library is the youngest of the bunch we are quickly ramping up the number of components available and for R3 2018 we certainly did not disappoint!
New Native UI Components for React
Starting off with the new components, here's a quick list of the new components that we added in since the last release:
Through our input elements, often used for forms, we added official integration with HTML5 form validation. This can be seen on individual component pages, like this one for our DateInput component.
For an even deeper dive in to the React release look forward to the React-specific release blog post!
Updates to our Native Angular UI Components
Our Angular library is also primed for a ton of new features!
I'll start with the Grid, which recently added the ability to integrate our menu component to create a context menu. We also added the ability to use the DateRangePicker component as a way of filtering. Another huge piece of news is that we managed to significantly boost the performance of the Angular Grid, achieving a smooth 60 FPS when scrolling through large amounts of data! A little peek behind the curtain on how we achieved this can be seen in this blog post.
In the Data Visualization world we added support for axis positioning, which lets developers choose exactly where the labels of an axis will be positioned. This is similar to how labels can be positioned in Excel charts, especially in scenarios with a negative Y axis.
There is one major component that I haven't brought up yet, and that is the official native Angular implementation of the Scheduler component. At the time of writing this blog post the component is not quite ready, but we are going to ship it within just a few weeks. A delay is never ideal, but we want to make sure its a component that can be usable at least for some of the most common scenarios when it initially releases. Thanks to releasing this as a separate package you do not have to wait until R1 2019 - instead this is right around the corner! We'll keep everyone up-to-date when it officially drops!
For even more insight in to the Angular release we will follow-up this blog post with one specifically for the Angular widgets.
Updates for the Vue.js UI Components
Vue.js Wrappers Get New Components
As the Kendo UI Wrappers for Vue are based on jQuery we will see a very familiar list to the first section of this blog post. That being said, let's dive straight in to it.
The big announcement here is that the Vue.js components are fully WCAG 2.1 compliant. This is huge news for anyone looking to ensure that their applications are as accessible as possible. The great benefit here is that it's all taken care of out-of-the-box without having to sacrifice anything from a user experience perspective.
New components for R3 2018 include the new MultiColumnComboBox, which combines the table structure of a grid within the drop down layout of a ComboBox, and the ArcGauge component, the perfect widget for some efficient & gorgeous display of values.
Updates to Existing Vue Components
The Vue.js TreeList component is getting a lot of attention this release with some of the top-voted features being implemented for R3 2018. This includes:
Batch/In-Cell Editing
Client-side Paging
Multi-column Headers
Keyboard Navigation
The Grid also received a few top-voted features:
Group Summaries in Group Headers
Updates to Responsive Behaviors
Ability to programmatically change column width
Finally on the feature update front, the Conversational UI component, introduced with the last release, received the new toolbar feature which allows end-users to add in images, voice, and other items in to their chat component. This expands interaction capabilities past simple text, and gives developers the flexibility to add in their own custom functionality.
Material Theme Comes to Vue
I'm also extremely excited to announce that with the R3 2018 release the Material theme, based on Google's Material Design, is now officially supported with the Kendo UI wrappers for Vue! Whether you have an existing application that follows Material Design, or looking to get started with Material Design in a new application, the Kendo UI components can be easily dropped in and fit with the overall user experience.
HUGE Update to Vue.js Documentation
Up until now we've relied a bit on a mix between our jQuery and Vue.js demos and documentation articles in order to get Vue developers up-to-speed with our components - far from ideal. We took a good hard look at what we could improve, and I'm happy to say that with the R3 2018 release we added 200 new demos to our Vue documentation! Thanks to this effort it should be very easy to start getting familiar with our Vue.js wrappers without having to jump between multiple different resources.
We Want to Hear from You!
As always, we want to make sure we hear your thoughts around the release! Feel free to add your thoughts in the comment section below. Did we miss one of your favorite features or a new component? Use our feedback portal to make sure that your voice is heard!
Want to See the Updates in Action?
I've covered a lot here, but if you want to see all of these release highlights and more then you should join us for the LIVE Kendo UI Webinar happening on September 27th at 11 a.m. ET! Join me and the Kendo UI Developer Advocate team in a live webinar where we'll take you through the R3 2018 release of all Kendo UI flavors! Seats are limited to make sure to reserve yours today!
We discuss the three project types available with Blazor 0.5.1, get an understanding of what scenarios to apply them to, and explore what to expect from each.
Blazor is a single-page web application (SPA) framework built on .NET that runs in the browser with Mono's WebAssembly run-time, or server-side via SignalR. Blazor features a component architecture, routing, a virtual DOM, and a JavaScript Interoperability (interop) API. Currently, Blazor is in an experimental state which allows for rapid development, iterations, and as implied, experimentation.
Blazor shipped 0.1 in March of 2018, and within a few months rolled out 0.5.1. In Blazor's short, roughly six month history it has already launched a variety of project types to on-board developers with varying application needs. In this article well discuss the three project types available as of 0.5.1, we'll get an understanding of what scenarios to apply them to, and what to expect from each. We'll jump in and evaluate the server-side, client-side, and full-stack. If you think you've seen it all, make sure to peek at the Server-Side project type as it may turn out to be quite different that one might expect.
Just so we all get started on the same page, let's begin with Blazor's prerequisites.
Before You Blaze
Blazor is an unsupported experimental web framework that shouldn't be used for production workloads at this time.
As of writing, Blazor is shipping at a rate of once every two months. Because of the project's nature, new tooling must be installed before the Blazor project templates are available in Visual Studio. The same applies to the dotnet command line interface (CLI).
Installation
If you're the type of developer who spends a majority of their time in Visual Studio then you're in luck, Visual Studio is likely to provide the best experience while Blazor is in its infancy, however the dotnet CLI is still quite handy.
Setting up Visual Studio requires the following steps:
This installation process will add the three project types we'll be covering below. Blazor Component Library project, the fourth and final project type, is only available from the CLI at this time. The Blazor Component Library is outside the scope of this article since it isn't an executable project type.
To make the templates available from the dotnet CLI, open a command console and run the following command:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
"Set Blazors to Run"
With the tooling installed we're ready to run and explore the Blazor projects. The New ASP.NET Core Web Application dialog is where the new project types are found.
To reveal the dialog:
Select File > New Project > Web > ASP.NET Core Web Application
Make sure .NET Core and ASP.NET Core 2.1 (or later) are selected at the top
Choose the Blazor template and select OK
Let's breakdown the project types from left to right:
Blazor *Client-Side
Blazor (ASP.NET Core Hosted) *Full-Stack
Blazor (Server-Side in ASP.NET Core) *Server-Side
* Denotes unofficial short description
Now that we know were to find each project template, we can discuss the details of each selection.
Blazor Client-Side
The Blazor client-side template can be compared to an HTML, CSS, and JavaScript application, similar to other SPA frameworks. However, in the case of Blazor, JavaScript is supplemented by .NET and C# via WebAssembly. Unlike ASP.NET MVC projects that use Razor, Blazor (client-side) is not rendered on the server, instead the HTML is delivered to browser via the Blazor framework on the client. So in essence the browser processes everything in this project is a static resource.
Since the project can be treated as a set of static resources, it leads to some interesting possibilities that have yet to be seen in the ASP.NET ecosystem. Projects built with this template can be hosted on virtually any resource than can serve static files, for example: GitHub pages and Azure Storage: Static website hosting.
The template includes examples of how to get started with Blazor as well as basic page layouts, navigation controls, and styling from Bootstrap. The project structure is fairly simple with just the few resources outlined below:
/wwwroot: web standard static resources including: CSS, JavaScript, JSON, images, and HTML
/_Shared: common (.cshtml) components & page layouts
App.cshtml: a temporary file, to be removed in later versions of Blazor
Program.cs and Startup.cs: application bootstrapping and configuration
At first glance, some familiar concepts may appear as Blazor uses an approach similar to ASP.NET apps. Not only is Program.cs and Startup.cs a common feature in .NET apps, but Blazor also utilizes a similar concept to ASP.NET Core Razor Pages. Blazor application pages or features can be found under the Pages project path, while routing is handled by the page's @page directive. In the Blazor framework, a view or .cshtml is treated as a web component including those marked with the @page directive.
All Blazor projects include an Index, Counter, and Fetch Data example pages. These items are consistent throughout all project types, except for Fetch Data, as the key difference between each project type is where the application is hosted in relation to the data it consumes.
Let's begin by examining the Counter page and its component markup and logic.
Counter
The Counter page is a simple component decorated with the page directive. This component demonstrates the basic composition of a Blazor component including: routing, data binding, and event binding/handling.
The counter component uses a basic HTML button to increment a counter field which is displayed within a paragraph tag. Because Blazor operates as a single page application all of the interactions in the component happen on the client. Updates to the browser's Document Object Model (DOM) are handled by the Blazor framework though data binding.
Moving on to Fetch Data page, we'll see how Blazor is capable of handing local data sources.
Fetch Data
In this project type, the Fetch Data page is a component that utilizes data from a local static file. The Fetch Data component demonstrates dependency injection and basic Razor template concepts. This version of Fetch Data is very similar to the example found in the Full-Stack template except for the location in which the data is loaded from.
At the top of the component following the routing directive dependency injection is declared. The @inject directive instructs Blazor to resolve an instance of HttpClient to the variable Http. The HttpClient is then used by the components logic to fetch data using GetJsonAsync which binds data from the JSON request to an array of WeatherForecast objects:
No server is used or needed for these basic examples. If we plan to develop our application with hosting and web services then the Full-Stack or Server-Side templates may be a better starting point.
Blazor Full-Stack
The Blazor Full-Stack template encompasses the same project structure as the Client-Side template with a few additions. Just like the Client-Side template there is no HTML rendered by the server and all files are delivered to the client as static files including .NET binaries. The difference however is added ASP.NET Core hosting and Web API and a Shared project for common application logic.
The template includes three projects: a Client-Side Blazor application Blazor.Client, an ASP.NET Core server application Blazor.Server, and a shared .NET Standard project for common application logic Blazor.Shared.
Blazor.Server
The server application is responsible for serving the application and providing web API endpionts for data. In Startup.cs we'll find the MimeType settings which configure the server to allow *.wasm and *.dll files to be served. In addition, compression is enabled to help reduce the size of binary files as the are transferred to the client. Compression is enabled through the AddResponseCompression middleware.
The Startup process also is where the Blazor application middleware is initialized by app.UseBlazor<Client.Program>. This identifies the Blazor.Client application which is being served.
The application comes with a simple example of a Web API controller and action. In the SampleDataController, a WeatherForecasts action generates a random set of weather forecasts. In the Full-Stack template, the WeatherForecasts web API replaces the static weather.json file found in the Client-Side template.
public class SampleDataController : Controller
{
// ...
[HttpGet("[action]")]
public IEnumerable<WeatherForecast> WeatherForecasts()
{
// ...
}
}
Blazor.Client
Nearly all of the Client application is identical to that of the Client-Side template. However, in FetchData example differs slightly by requesting data from the WeatherForcasts web API endpoint in the GetJsonAsync method call.
Since the project includes a server and client solution that both use .NET it's possible to share code between both applications. This is a scenario unique to Blazor since the client is running .NET client side instead of JavaScript. The example given in the project template utilizes the same WeatherForecast class on both the server and client application.
public class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public string Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
The WeatherForcast class is just a basic idea of shared code, however other shared application code may include: validation, converters, and business logic which is decoupled from system, IO, or web concepts. Expanding on this idea further a theoretical application may share libraries between other .NET frameworks such as: Xamarin, Windows Universal Platform (UWP), or other .NET based web applications.
No Ahead-of-Time Compilation (AOT)
In other .NET web technologies like ASP.NET MVC (and Core MVC), the Razor templates are rendered by the server and sent to the client as HTML. Some JavaScript frameworks like Angular and React share rendering responsibilities on both client and server in a process called ahead-of-time Compilation (AOT) or Isomorphic Rendering. Even though the Blazor client application is hosted on a .NET server, all views are rendered client-side in both the Client-Side and Full-Stack project templates. Currently, there are no AOT/Isomorphic Rendering options for Blazor, but a Server-Side Blazor app model does exist.
Blazor Server-Side (aka Razor Components)
On September 12, during DotNetConf Blazor Server-Side was announced as a new feature in ASP.NET Core 3.0 and will be known as ASP.NET Razor Components.
ASP.NET 3.0 Razor Components will be the first official (non-experimental) release of the Blazor framework.
The Blazor Server-Side project template takes a significantly different approach to how a Blazor application is delivered and interacts with the browser. When using the server-side configuration Blazor utilizes the browser as a "thin-client" by deploying a SignalR JavaScript application to the client. On the server, Blazor implements a SignalR hub communicating with the client via web sockets. In the server-side hosting model, Blazor is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over the SignalR connection. In this configuration there is no need for WebAssembly and Blazor is executed on the ASP.NET Core runtime at the server. All UI updates are sent as diffs, bidirectionally as binary packets over web sockets. To the user, the application is indistinguishable from any other web application.
Despite the drastic differences in how Blazor operates server-side, the actual application model stays relatively the same. In the server-side project template there are a only few differences in example code provided by the template. The template includes two projects: a Server-Side Blazor application App, an ASP.NET Core server application Server which hosts the Blazor app.
App
The index.html is the client entry point to the application. When configured for server-side operation the JavaScript file, blazor.server.js replaces blazor.webassembly.js. blazor.server.js invokes the SignalR client and establishes communication with the Blazor server-side application.
Because the entire application runs server side, in this project type the Fetch Data example utilizes data from a local service. The @inject directive in this example resolves an instance of WeatherForecastService in place of HttpClient as seen in the Full-Stack project template. The WeatherForecastService in the example is a simple class that generates random data, however in a real-world scenario the service could be an Entity Framework database context, repository, or other sources of data.
The WeatherForecastService and other services are added to the dependency injection container in the ConfigureServices method found in Startup.cs.
public void ConfigureServices(IServiceCollection services)
{
// Since Blazor is running on the server, we can use an application service
// to read the forecast data.
services.AddSingleton<WeatherForecastService>();
}
Server
The server project provided by the template is a simple ASP.NET Core host. In the Startup.cs of this project, the UseServerSideBlazor middleware is invoked and the Blazor application's startup is initialized.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseResponseCompression();
// ...
// Use component registrations and static files from the app project.
app.UseServerSideBlazor<App.Startup>();
}
Pros and Cons
Since only a small amount of JavaScript is required to bootstrap the client and no .NET assemblies are transferred to the client the Server-Side Blazor application is efficient with network traffic. Even during operation network traffic is light because communication between the browser "thin-client" and the server is a small binary packet. However, because web sockets are used, the client and server must always be connected. This means that Blazor Server-Side apps cannot work in offline mode.
Conclusion
While Blazor is an extremely new framework still in its experimental phase it ships with several ways to get started. Each project type includes a similar set of examples with the Counter and Fetch Data components. The Fetch Data example varies from project to project to showcase specific features of that project type.
With the Client-Side, Full-Stack, and Server-Side project templates developers can choose the starting point that best fits their application's requirements. The Client-Side template focuses on running static files completely in the browser, while the Full-Stack template includes ASP.NET Core hosting and Web API. Using the Sever-Side template utilizes the Blazor framework on the server and relies on SignalR in place of WebAssembly thus trading performance for a dependency on always being connected.
If you're excited about Blazor and are ready to begin experimenting too let us know in the comments below. What are your plans for Blazor?
Let’s cover some of the common updates across both Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core, as there are quite a few.
Kicking things off, let’s mention the brand new components that we’re adding. I'm happy to say that with R3 2018 we delivered on the most top-voted feedback item: a dropdown with a table structure for each item.
Introducing the MultiColumnComboBox
As the name might indicate, with the R3 2018 release we now officially have a ComboBox component that provides a grid as a way to display additional data values for each individual item.
The power within this component comes from the features that stem from a ComboBox, including:
Server filtering
Virtualization
Grouping
Templates
Keyboard Navigation
Cascading MultiColumnComboBoxes
For those of you familiar with our regular ComboBox, these are all features already available within this component. Thanks to us referencing the ComboBox when implementing this component we already have a long list of important features added in, so this component is truly ready to be added in to any MVC or Core web application.
Data Visualization - Adding the Arc Gauge
While our data entry and complex UI components are popular, we do often receive feature requests around our data visualization components as well. The gauges are certainly no exception and we’ve received quite a few requests about the type of gauges that we can offer. To satisfy your appetite for more visuals we added in a brand new component, the ArcGauge. This widget gives you a simple and elegant way to display a value or a percentage of a value without any additional bloat.
Updates to Existing Components
Comprehensive Updates to the TreeList
The TreeList component is the perfect component when you have data that always has the same set of fields, otherwise known as homogenous data. Often times folks want to display this in a set of hierarchical grids, where each data item has a set of columns that are displayed. Of course, sharing a structure with a Grid means that there are plenty of features that can also be added in to the TreeList. With R3 2018 we took care of the top-requested items pertaining to the TreeList component, many which stem from the similarities in the Grid.
Multi-Column Headers
Often times we may want to showcase that the headers of a grid are part of a particular category or group, which is where multi-column headers come in to play! This gives you the option to define a column which might span over several sub-columns.
Client-side Paging
This feature is intended to help with large data sets within the TreeList. It is currently specifically for the client-side, which means that all of the data has been loaded on the client, but this new feature should help tremendously in the way of performance.
Batch/InCell Editing
As the name gives away in-cell (or “batch” as it is called as well) allows end-users to edit individual cells rather than putting an entire row in edit mode. Updates, additions, or items that have been removed, can then Be synced in one single request going back to the server.
Keyboard Navigation
The name gives it away, but we have officially added full keyboard navigation support to the TreeList component.
The Grid is the most-used component in any of our libraries, especially within Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core, so I want to make sure that I mention the features we added here as well.
Group Summaries Now Available in Group Header
While the data of group summaries has been available in the header of a group (the item that you click on to expand or collapse your groups), it wasn’t automatically aligned with columns like in the footer. With R3 2018 we added the same style of summaries to the header of your groups that you’ve enjoyed in the footer of a group. No custom templates or CSS required, just a configuration option set on a column definition.
Updates to Responsive Behaviors
As we continue to look at how we can improve our support for Progressive Web Apps, we wanted to add some more functionality to the Grid. Specifically we took a feature that folks have enjoyed in our Angular grid which is to have a media property available for each column. This uses the matchMedia string API in order to define what columns are displayed or hidden depending on the viewport.
API Added: Update column width programmatically
Up until now, once a column width has been defined a re-render of the Grid would be required to update any width of a column. Thanks to the new API call that we added with R3 2018 you can now define the width of any column of the Grid programmatically and have it update the Grid accordingly.
Conversational UI Updates
The Conversational UI component was introduced last release and we’ve been receiving some pretty good feedback so far! An item that we’ve seen requested and which is often used in some of our other UI libraries offering the same component is the toolbar feature. This gives users additional ways to interact with your chat, including adding images and voice recordings. This is of course something that we offer a template for, so you can customize this even further to fit your requirements
Material Theme Comes to MVC & Core
I’m excited to say that the wait is finally over: the new Sass-based Material Theme has landed for Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core!
Official Support for Core 2.1
This is specific to ASP.NET Core, but Telerik UI for ASP.NET Core officially supports ASP.NET Core 2.1 This means that not only do we have all of the Tag Helpers available to you, we also support the latest and greatest within the framework itself. One big item that comes from this support is that we now integrate with SignalR for ASP.NET Core.
We Want to Hear from You!
Many of these features may not have been added if it wasn't for the fact that we hear from our developers. So, if you feel like we missed any new components, or any features, make your voice heard! Add a comment in the comment section below, or submit feedback to our our feedback portal.
Want to See the Updates in Action?
Last thing, I promise. This blog post might have been a lot to digest and if you prefer to see things covered live then I've got great news! As a part of the R3 2018 release we have the LIVE Telerik Webinar happening on October 2 at 11 a.m. ET! Join Developer Advocates Ed Chabeneau and Sam Basu for a live webinar where we'll go over the changes that have been introduced with R3 2018. There are limited seats so make sure that you reserve yours as soon as possible!
Our third major release of the year is here! Check out what's new in Telerik UI for ASP.NET AJAX - from new RadHtmlChart features to updated internal references and more.
I'm sure you all have started to feel it. That special feeling that comes around three times a year: the R3 2018 release is here! I'm sure you've been reading all of the new information for all of the various Telerik products, but I wanted to dive specifically into Telerik UI for ASP.NET AJAX and see what is new in R3 2018!
New Functionality in RadHtmlChart
One of our more popular components within Telerik UI for ASP.NET AJAX is our RadHtmlChart component. This control provides a quick way to display data either as a SVG or Canvas element.
With the R3 2018 release we implemented one of the most popular feature requests for this component: the ability to define axis label position.
See how the labels are kind of mixed in with some of our bar chart items? It may be hard to read. With the new configuration option we can simply define that we want to display the labels at the bottom of our chart area instead:
Much easier to read the values, don't you think?
Beyond this feature we also resolved over 25 of the most reported issues with the chart component, ensuring that the R3 2018 release brings the most stable version of the RadHtmlChart yet.
Upgrade to Internal Kendo UI References
A small peek behind the curtain for those of you that may not be aware, some of the Telerik UI for ASP.NET AJAX components are based on our jQuery UI components from Kendo UI. Of course, all of these components have been thoroughly written to ensure that they fit with the ASP.NET AJAX framework, so many of you might not have noticed that this was even a thing.
I mention this because while we've been working on some other items within Telerik UI for ASP.NET AJAX over the last couple of releases, we haven't upgraded the internal Kendo UI reference in a while. With the R3 2018 release we upgraded the internal Kendo UI scripts to the latest version, which came with a huge set of improvements. This alone resulted in over 75 reported issues being resolved across our Spreadsheet, client-side PDF export library, Gantt component, and our HTML drawing framework.
Feedback Wanted!
With every release we're always looking to hear from you! Feel free to comment in the section below, or vote for and add items to our feedback portal.
Webinar
Want to see all of this, and the rest of our .NET tooling, in action? Sign up for the LIVE Telerik R3 2018 release webinar. This is happening on Tuesday, October 2nd at 11 a.m. ET. My colleagues in the Developer Advocate team will be diving in to the latest and greatest within the Telerik product collection. Seats are limited, so grab yours today!
Take a look at some of the changes coming in the R3 2018 release of Kendo UI for jQuery, including WCAG 2.1 compliance, new components and more.
You've probably already seen the summary I provided in the overview blog post around Kendo UI for R3 2018, but I wanted to take a deeper look at specifically what is new for the jQuery UI components with this exciting new release.
First UI Library with WCAG 2.1 Compliance
One of the biggest highlights for me with this release is the official support for WCAG 2.1. This makes Kendo UI the first commercial UI library that supports this new standard for accessibility.
Why is this a big deal to me? Well, accessibility has been a big part of Kendo UI, and all of our web components, since the very beginning. We haven't seen an update to these standards since then, so it's always exciting to see improvements to the standard. WCAG went from 2.0 to 2.1 as the recommended standard in June. Here's an overview of what's new, but the short version is that this standard focuses on a few areas of improvement over 2.0, including mobile accessibility, and improved standards for folks with low vision, and for people with cognitive and learning disabilities.
The best part is that this is all taken care of out-of-the-box. As a developer all you need to do is add in a Kendo UI widget, or upgrade your existing references, and you'll be able to take advantage of this accessibility compliance.
New jQuery Components
Of course, it wouldn't be a noteworthy release without mentioning some of our new components. I'm happy to say that with R3 2018 we delivered on the most top-voted feedback item for Kendo UI: a dropdown with a table structure for each item.
Introducing the MultiColumnComboBox
As the name might indicate, with the R3 2018 release we now officially have a ComboBox component that provides a grid as a way to display additional data values for each individual item.
The power here comes from the the features that stem from a ComboBox, including:
Server filtering
Virtualization
Grouping
Templates
Keyboard Navigation
Cascading MultiColumnComboBoxes
For those of you familiar with our regular ComboBox, these are all features already available within this component. So, no need to wait for a bunch of features to have to be added, this is truly a component ready for action immediately.
Data Visualization - Adding the Arc Gauge
We are constantly receiving feedback and requests around our data visualization components, and the gauges are certainly no exception. To satisfy your appetite for more visuals we added in a brand new component, the ArcGauge. This widget gives you a simple and elegant way to display a value or a percentage of a value without any additional bloat. Just a beautiful arc shape and some values.
Updates to Existing Components
Major TreeList Updates
The TreeList component is the perfect component when you have homogenous data that you want to display in a hierarchical fashion with the additional requirement of having a column structure like you traditionally see in a grid/table.
This means that while there are plenty of unique features in such a component, we also have a lot of requests to have features we see in the Grid available within this component. With R3 2018 we have added in some of the most-requested features of this component that end up coming from Grid functionality.
Multi-Column Headers
Sometimes having a single header per column isn't enough, especially when you want to group headers together. With multi-column headers you can define overarching headers for several columns.
Client-side Paging
While available exclusively on the client-side, as in when all data has been loaded to the client, client-side paging has been added to improve performance and rendering with more data intensive applications.
Batch/InCell Editing
As the name gives away InCell editing (or Batch as it is called as well) allows end-users to edit individual cells rather than the entire row. Updates can then be batched together and sent as a single request to the server.
Keyboard Navigation
Pretty self-explanatory, but we have now officially added full keyboard navigation support to the TreeList component.
Grid Component & Conversational UI Improvements
The Grid is the most-used component in the suite so I want to make sure that I mention the features we added here as well.
Group Summaries Now Available in Group Header
Up until now group summaries has been exclusively relegated to the group footers of a Grid. Now, with R3 2018, we have officially added the same type of summary to the headers of groups. This was previously possible, but only through some custom CSS and HTML within templates. Now this is a simple configuration option.
Updates to Responsive Behaviors
As we continue to look at how we can improve our support for Progressive Web Apps, we wanted to add some more functionality to the Grid. To achieve this we now have a media property for each column of a Grid. This expects a valid matchMedia string in order to control when to show or hide a column depending on available viewport size.
API Added: Update Column Width Programmatically
Up until now, once a column width has been defined a re-render of the Grid would be required to update any column widths. With R3 2018 we have introduced a long-awaited API update which gives you the ability to redefine the width of a column programmatically after the Grid has been rendered.
Conversational UI Updates
Folks have been pretty excited about our Conversational UI component, so we took some time to add one highly anticipated feature there - the ability to add a custom toolbar to your chat. This gives users additional ways to interact with your chat, including adding images and voice recordings. This is of course something that we offer a template for, so you can customize this even further to fit your requirements.
Other Component Highlights
GraphQL Integration
It's impossible to escape the excitement around GraphQL. While it may not be applicable for every single project, it certainly does have scenarios where it makes a ton of sense. We've heard this within our existing client base as well, which is why we went ahead and created some resources around binding Kendo UI components to GraphQL.
The easiest example to follow would be the binding Grid to GraphQL demo since the Grid is often used in data binding scenarios, and it gives us a chance to see how the DataSource can be used to communicate with GraphQL.
A fairly popular feedback item for the Window component is to restrict the movement to a particular area rather than the entire browser window. Well, with R3 2018 we added this functionality and to see this in action you can refer to the Kendo UI Window Constrain Movement demo.
Chart Labels
Another note I wanted to make around updates to existing components is an update to our charting library. Something that folks have struggled with is dealing with labels within a chart when there are positive and negative values being displayed. Rather than try to describe it I figure it's easiest to see through images.
We were initially hoping to get the Material theme added to jQuery with the last release, but we needed some more time to get things right. Well, we've taken that time and now we can say that the jQuery components officially supports Material Design!
AngularJS 1.7.x Support
There are plenty of applications out there that are created with, or at least maintained with, AngularJS 1.x. This is something that has not slipped past Google and during the summer they release Angular 1.7.x which is the last significant release of AngularJS. To ensure that everyone using Kendo UI in AngularJS can work with the latest-and-greatest within this framework, Kendo UI now officially supports AngularJS 1.7.x. Our support for this edition of AngularJS comes from our jQuery components, which is why I mention it here. Are you looking to work with Angular (2+)? We do have native components built from the ground-up in case you're interested!
We Want to Hear from You!
Many of these features may not have been added if it wasn't for the fact that we hear from our developers. So, if you feel like we missed any new components, or any features, make your voice heard! Add a comment in the comment section below, or submit feedback to our our feedback portal.
Want to See the Updates in Action?
Last thing, I promise. This blog post might have been a lot to digest and if you prefer to see things covered live then I've got great news! As a part of the R3 2018 release we have the LIVE Kendo UI Webinar happening on September 27th at 11 a.m. ET! Join me and my colleagues on the Kendo UI Developer Advocate team in a live webinar where we'll go over the changes that have been introduced with R3 2018. There are limited seats so make sure that you reserve yours as soon as possible!
Check out the changes coming in the R3 2018 release of Kendo UI for Angular, including new notifications, Grid improvements and more.
In an attempt to spare folks from a novel of a blog post highlighting all of the changes across every single product within Kendo UI, I've tried to separate things out to more consumable blog posts. While you might've seen some of this information in the summary blog post, I wanted to dive in to the changes that have happened with the R3 2018 release of our native Angular components!
New Components for Angular
When it comes to new components, the biggest item that many of you have waited on is the Scheduler component, which I'll cover later in a section below this one. In terms of other new components, the R3 2018 release of Angular introduces the new Notification widget, providing a flexible way to display a popup anywhere within your application.
The notification widget is both very simple to use and flexible, which is of course important for any 3rd party UI component! What is nice about this widget is that we not only created a default look-and-feel for notifications across all of our themes, but we've also gone ahead and created styles for common notification types.
Here's a look at the "warning" type with our Default theme:
And here we have the "error" type with the same theme:
We also provide the ability to customize the content of the notification by passing in a string, using an Angular template, or even rendering a custom component!
In the image above we have a template for the notification that renders a custom component that contains a button.
Of course we also added functionality across the board to other UI widgets within our native Angular UI component suite.
I know you love hearing about the Grid, so for R3 2018 we added the following features.
Context Menu
Thanks to integrations with the native Angular Context Menu from Kendo UI, we can now provide a menu which allows us to interact with items found within the Grid. This demo goes into more details.
DateRangePicker as a Method of Filtering
Using the DateRange component that we introduced with the last release, we can provide a filter component that allows us to filter between a set of dates within our Grid data. Check out this demo to see how.
Performance Update with Smooth 60 FPS While Scrolling
One HUGE item that I want to mention while talking about the Grid is that we recently took a look at how we could increase performance in certain scenarios. As a result of this research we've implemented a way that allows us to achieve a smooth 60 FPS while scrolling through large data sets. That's some buttery smooth action right there! One of the developers dove in to how we discovered the issue and what we did to improve performance in this great blog post.
State Persistance
We often get asked how to preserve state within our more complex components, and this of course includes the Grid. This can include current selected items, filters applied, or sort order. Of course, this could also be used when paging between various pages within the Grid as well. Whatever your requirements call for, check out our persist state in the Angular Grid demo to see how you can add this to your application today.
Chart Axis Position
In the Data Visualization world we added support for axis positioning, which lets developers choose exactly where the labels of an axis will be positioned. This is similar to how labels can be positioned in Excel charts, especially in scenarios with a negative Y axis.
The best way to showcase this is in the following before and after pictures.
Before
After
See the different? Much easier to read when dealing with both positive and negative values.
Update on the Scheduler
The Scheduler component has been a huge focus of ours over the last couple of months. Implementing such an extensive component is no easy task, which is why a lot of energy went in to the component for this release. However, at the time of writing this blog post the Scheduler widget is not quite ready yet.
While I apologize for not being able to show you this widget today, as we need a little bit of extra time to get things right, I do have good news! Since we release components in individual packages and the engineering team has adopted Continuous Delivery we can release the Scheduler component the second that it's ready.
With that being said, the Scheduler component will be released sometime over the next couple of weeks, which means that while you will have to wait for a little big longer it won't be too long - the Scheduler's release is right around the corner.
Is Something Missing? Let us Know!
Our releases would not be possible without the feedback that we get from folks using our components, so make sure that your voice is heard! Is something missing from this release like a component or a particular feature? Use the comment section below or submit this to our feedback portal to ensure that we can add your feedback to our roadmap!
Live Kendo UI Webinar!
Want to see more? How about seeing folks work with the new bits live? Well I have good news, we have the LIVE Kendo UI Webinar happening on September 27th at 11 a.m. ET! Join myself and the Kendo UI Developer Advocate team a live webinar where we step through the latest-and-greatest while on air. Reserve your seat today as they are limited!
Catch up on the latest updates in the R3 2018 release of Kendo UI for React, including new native components, visualizations and more.
We've had quite a busy couple of months over here on the React side of the Kendo UI house. With a huge set of new components being released, along with important features added to existing components, I wanted to take time beyond the summary post you may have already read and dive in to what's new with the R3 2018 release for React!
New Native UI Components for React
Starting off with the new components, let's just head straight in to each new widget:
Menu
This menu widget is perfect for building out site navigation, or to provide a contextual pop-up with options for other UI elements on your page.
MultiViewCalendar
The MultiViewCalendar widget provides two calendars side-by-side (often showing two different months) to give users an intuitive way to deal with date ranges or selecting dates while giving a bigger picture view.
DateRangePicker
Building off of the MultiViewCalendar, the DateRangePicker gives developers a way to collect start and end dates for something within one single component. No more need to set up two DatePickers and manually define the range!
MultiSelect
The name gives it away, but for scenarios where your users need to input multiple pre-defined values from a list the MultiSelect component for React is the perfect way to go.
Tooltip
The Tooltip can be attached to any basic HTML element, as well as more advanced components like our native React UI widgets.
Dialog
Whenever a prompt with specific actions (yes/no or accept/cancel, for example) needs to be displayed in a modal popup, the Dialog component is the perfect choice. Content can be customized through simple strings, or customized further through our configuration options.
New Data Visualization Library Updates
The Data Visualization library also received some juicy new updates and components.
Sparkline Chart
The image above is taken straight from our demos and showcases how the Sparkline chart can easily be added in to a paragraph and mix effortlessly with text around it. Another big use case would be adding this to a column of a Grid.
Stock Chart
Financial data is a huge part of any business application, and oftentimes this calls for a specific set of markers and interactions when it comes to charts. Luckily the new React Stock Chart component has you covered!
Gauges
Choose between our Linear, Radial, or Arc Gauges (also the order they're displayed in the above image) to provide a unique data visualization for your applications. All these types are built in to the new React Gauge component.
Exiting Components Get New Features in React
Beyond the new components we also went ahead and added some of the most sought-after features for the existing set of native React UI components.
The Grid received some big updates both in terms of features and under-the-hood changes.
Through our input elements, often used for forms, we added official integration with HTML5 form validation. This can be seen on individual component pages, like this one for our DateInput component.
The Calendar widget also received the ability to hide its navigation and configure the calendar view depth through simple configuration options.
Documentation Updates
While this may only be noticed by existing React users, we also went ahead and did some updates to our documentation - specifically within the organization of documentation articles. Once you dive in to a component you will find the menu on the left-hand side to be more intuitive to browse through, with clear indications of when a sub-section exists. This also helped with the overall performance of the application as you navigate through all of the available options. Check it out by going to our React components page and selecting your favorite component!
Got Feedback?
I always say this, but I want to hear what you think about this release! Did we miss your favorite component? Any features that you want to see added to existing components? You can post in the comment section below, or vote and/or submit items to our public feedback portal. The feedback that we get from our users drives our roadmap so if you want to see something added in a future release definitely make your voice heard!
Join Us for the Live Webinar!
I've covered a lot here, but if you want to see all of these release highlights and more then you should join us for the LIVE Kendo UI Webinar happening on September 27th at 11 a.m. ET! Join me and the Kendo UI Developer Advocate team in a live webinar where we'll take you through the R3 2018 release of all Kendo UI flavors! Seats are limited so make sure to reserve yours today!
