In this third installment of Jessica Engstrom's five-part series on UX principles for developers, she explores the concepts of responsiveness and efficiency.

If you missed my previous posts, you can catch up right here: Part 1: Make Software Understandable and Part 2: Ergonomics & Beauty. Otherwise, let's dive into part 2 below.

Responsiveness

Is there anything more frustrating than a page or app that doesn’t seem to respond to your interactions? Well, there probably are but it’s still a source of many rage-quits.

For me this is very important, we might have the most beautiful design where you thought about the user experience everywhere else. But if we lose our users because our solution isn’t responding or is very slow, there’s a risk our users won’t stay for all the other good stuff.

Human reaction time is somewhere between 85-300 milliseconds depending on the circumstances. We can take that into consideration and look at some ways of preventing the feel of slow or non-responsive software.

For example, within 100-300 milliseconds of user activation provide a confirmation like the button looks pressed. Within 500 milliseconds respond to any tasks that the user deems easy to perform like page down, zoom, minimize window.

If our task takes more than one second, give continuous feedback, like a spinning wheel or progress bar. If our task takes more than two seconds, make sure the continuous feedback you are giving keeps updating every 2-5 seconds, so our users don’t think the solution has frozen.

Unexplained waits always seems longer than explained waits, even though we don’t tell the user that we are really getting the data from a database or loading graphics it will still be an explanation of sorts.

The game Merge Dragon has a cute way of solving their loading times (see the captions, listed below).

“Loading all dragons,” “Loading emoticons,” “Igniting Dragon’s breath,” “Unraveling time”

This has of course nothing to do what is happening, but it gives the user an indication that something is happening and gives them a perceived sense of speed.

Efficiency

Something else we as humans like, especially in today’s stress-inducing society, is being efficient.

Having to do workarounds or far too many steps is not something that most of us enjoy. That’s why we need to make our user interface feel more efficient. It doesn’t necessarily have to be fewer steps if the user perceives it as more efficient.

This is what it looks like when you want to order movie tickets in Sweden

I have put in a prepaid ticket number (kind of a gift card) and I’m prompted to proove that I’m not a robot.

That’s okay, but in my case I want to order four tickets the same way, and I’m prompted four times. If I wasn’t a robot 30 seconds ago, I’m probably not a robot now either. Imagine when I ordered tickets to see the latest Star Wars movie, we were 18 friends who were going. 18 times I was not a robot. A more efficient way of asking would be to let me fill in all the prepaid numbers and THEN ask me once.

Another thing that might take away from the efficiency of our UI is when we put too much information on the same screen. Don’t get me wrong, information is good for comprehension, but keep it simple.

If there is too much to look at, we might not see the most important things. See if you can sort things into groups or pages instead. Or just boil all the information down to the very essentials.

Remembering things about our users can also increase efficiency. If the user has already given us information, rather than prompting for it again, just get the information from storage. For instance if our users signs in to our service using their email address and then clicks “contact us” or “sign me up for emails,” use the email you have and pre-fill the form and ask “do you want to use this email” instead of just prompting them to fill in their email again.

Making it as efficient as possible and showing the user that you tend to their interaction will make all the difference in the user experience.

Stay tuned for the next post in this series, or for more, feel free to check out the webinar we recently hosted on the topic right here.

Catch up on what you missed with a selection of top sessions from jsMobileConf, or watch the whole playlist.

Back in October, Progress put on a brand new event in Boston focused on mobile JavaScript and the broader JavaScript ecosystem. Called jsMobileConf, this conference brought in speakers from Microsoft, Adobe, Google, and Progress to talk about topics such as serverless, IoT, native apps, AR/VR, mobile web, AI, and more.

Admittedly we've been a bit tardy in getting videos of the conference ready for you all, but here is a selection of some of the most highly-rated talks from jsMobileConf 2018 (and the full playlist is available on YouTube)!

NOTE: jsMobileConf is coming back to Boston later this year! Stay tuned to (soon-to-be-updated) jsMobileConf.com for more details.

Each header below has the speaker's name linked to their Twitter account and the word [slides] linked to their deck if they have one so you can easily learn more. Enjoy!

Burke Holland: VS Live Share Can Do That?

VS Live Share is a free code collaboration service for VS Code. Think of it as Google Docs for your JavaScript files. Multiple developers can collaborate on the same project all within their own editors. This is not source control. This is you loading up someone else’s entire dev environment on your own machine. Seriously. Come take a look at how Live Share really changes the way that we think about how we work together. You might be shocked to learn what it can do, and how it can dramatically improve your workflow.

Jory Burson: Standardizing JavaScript

JavaScript is an openly standardized programming language, but what does that mean and how does that work? And why is it important, anyway? This talk will cover JavaScript’s standardization efforts in Ecma TC39 and what it means to create and implement open standards. We’ll also take a look at the future of web standards, some of the opportunities available for mobile web standards, and how the process is evolving to fit the needs of modern developers.

Chris Fritz: How to Write Great Docs as a Bad Writer

I have a confession to make: I’m not a gifted writer. I often write terrible docs, poorly organized and filled with explanations that don’t even make sense to me when I read them later. Despite this, people often love my docs when they’re published - yes, love. I get hugs from strangers for my technical writing! In this talk, I’ll walk through my process for turning terrible initial drafts into something hug-worthy.

Brandon Satrom: Bending the IoT to Your Will with JavaScript [slides]

In 2018, connected, embedded systems are everywhere, and “the IoT” is quickly moving beyond the connected-toaster memes of recent years and into the realm of reality. And as more and more developers are solving real problems with IoT devices, they are discovering that building an IoT solution is about more than a microcontroller, sensors, actuators and a Wi-Fi or cellular radio. It’s also about how that device interfaces with the world around it, makes its data available, and allows itself to be controlled from the cloud. Ultimately, building IoT solutions is about building applications that leverage hardware, firmware, and software, and savvy developers are discovering that, in the software realm, JavaScript plays a heavy role in enabling connected applications. In this session, we’ll explore some of the ways that the modern developer can take control of the IoT with JavaScript.

Ethan Marcotte: Responsive Design: Beyond Our Devices

Responsive designers now focus on patterns: reusable design modules we stitch together into larger layouts. But how should those patterns adapt, and when? And how do we design with them? We’ll look at answers to those questions, and start moving our design practices beyond the screens in front of us.

Shiva Prasad: Machine Learning on the Go with TensorFlow.js [slides]

Have you heard about TensorFlow.js yet? It has enabled a way to do machine learning in the browser. What if I told you that you can also make it work inside your mobile apps without using a browser!? Let’s explore the benefits of being able to do machine learning on the go. You can train your models on the device instead of on the server. You can provide a tailored smart solution for each user, that gets smarter every time it is used.

Sebastian Witalec: Adopt an AI-driven Chatbot Today [slides]

If you ever asked yourself any of these questions: What do chatbots eat? Do chatbots have dreams? What are the usual chatbot challenges? Then this talk is for you. We will answer all of the above questions and many more. You will learn how to build a fully functioning chatbot in less than 10 minutes – without a single IF statement – and train it to understand human language. Then we will top it up with a quick AI training to make it understand the language normal people speak.

Jeff Whelpley: Lean Native

Building a new product can be extremely challenging, but a strong focus on user feedback and quick iteration cycles with Lean methodologies can help tip the odds in your favor. In this talk, Jeff will explain how and when native mobile should fit into a process that emphasizes rapid iteration cycles and doing the absolute minimum amount of work to achieve the desired results. Stop investing months or even years of your life building your native app before you first launch anything to the public. There is a better way! Jeff will take you step-by-step through a process that will help you start getting feedback from your users within weeks and will greatly increase your ultimate chances of success.

Diana Rodriguez: Debunking Myths: Imposter Syndrome [slides]

We have all been there. At some point of our career we have stared blankly at our screens and thought that maybe this wasn’t our place. Maybe some of us have felt like we didn’t even deserve to be where we are. Let’s talk about it, learn to recognize if you’re battling imposter syndrome and how to deal with it without burning to ashes.

Anton Hristov: Building an Innovation Engine Inside Your Organization [slides]

The pace of technological advancement is accelerating and so is the rate of user adoption which creates an amazing market opportunity and a daunting challenge for existing businesses that want to remain at the cutting edge of technology and grow. Let’s explore how organizations can take advantage of this opportunity by creating a culture of learning, applying the scientific method to idea validation and helping entrepreneurial employees bring ideas to life – from launching a MVP (minimum valuable product) to achieving product-market fit and measuring success along the way. We will look at Progress Labs as a case in point.

Stanimira Vlaeva: Boosting Your Development Experience with Webpack and Hot Module Replacement

The Hot Module Replacement (HMR) feature in Webpack can replace bits of code in a program while the program is running. What’s more - the program will know that something inside it has changed and can decide how to handle it. For example, it can keep the values of its variables, evaluate the new code and restore the values of the variables. And you don’t need to restart the program to see the changes!

Panel Discussion: The Future of Mobile

A panel discussion of where mobile is headed, including conversations on virtual/augmented reality, AI, machine learning, IoT, and more.

We hope you enjoy these videos, and be sure to check back with us at jsMobileConf.com, which will soon be updated with new details on the next jsMobileConf. Hope to see you there!

Check out this overview of the Kendo UI JavaScript Grids to get an idea about the breadth of features a grid can have. The Kendo UI Data Grid components are built specifically for each of the major JavaScript frameworks, whether that’s basic jQuery, or Angular, React, or Vue.

Modern web applications provide many different functions to users, but the most common ones involve the display and manipulation of data. This might be inventory control, or stock history, or housing prices. The one thing most apps have in common is data. Regardless of the technology your application is built on, you will likely need to enable your users to work with large amounts of data. It’s worth taking some time to understand the most popular component for visualizing data: the datagrid (also referred to as a table)and explore the range of functionalities it can have. Grids are powerful components which enable you to visualize, organize, and edit tabular data.

The summaries below offer a quick overview of the numerous features available with the Kendo UI Grid component for all major JavaScript frameworks (jQuery, Angular, React and Vue). They will also give you a good idea about the breadth of features a grid can have. For each of these frameworks we’ve developed the Grid from the ground up using that framework technology to achieve the best integration and performance.

But why use a commercial data grid in the first place? Isn’t that something that you could just develop yourself? Perhaps, but is that what you really want to spend your time working on?  Using third-party UI components gives you more time to focus on your application's competitive differentiation by helping you offload some of the UI development. The result is that you cut development time and cost significantly, while creating a consistent and professional looking app. Developing a complex grid is a solid undertaking, so the benefits of implementing a professionally developed, documented, and supported one can be considerable.

Before we dive in the grid, let’s just note that each component is part of a bigger app that may have its unique design requirements. This shouldn’t be an obstacle preventing you from using a component library. That’s why we have created our Theme Builder tool, with which you can quickly set all our component’s look and feel to match your existing environment and theme requirements.

Kendo UI jQuery Grid

Kendo UI for jQuery is a popular commercial UI library that includes data grids, charts, schedulers and many other components. The Kendo UI Grid is the most advanced jQuery grid on the market, with more than 100 built-in functionalities. It has everything needed to fulfill even the strictest business requirements.

To fill up the grid with data, you can supply either local or remote data. With the Kendo UI DataSource component used as a mediator, you can do this easily. If you need to create Kendo UI grids with dynamic data follow these steps showing how to initialize a dynamic editable grid with a single line of code. When it comes to presenting and performing operations over the underlying data, the component provides a variety of options. The basic ones are paging, sorting, filtering and selection. However, a grid can get very complex and include advanced functionalities such as editing, grouping with aggregates, virtualization, frozen columns, export and hierarchy.

App speed is usually a top factor in good user experience, and we’ve written about the best practices when it comes to optimizing the Kendo UI jQuery Grid for performance, including common mistakes you should avoid making.

In numerous scenarios it’s not enough to visualize data in a table structure – you also need to enable the user to manipulate this data and save their changes. The Kendo UI Grid component supports data editing operations (create, update, destroy) via a simple configuration of its data source. It offers several editing options – batch, inline, popup and custom editor templates.

Often you need to implement the grid within an existing application. This is easily done with the grid component as it supports reusable themes, both SASS and LESS. If you need to change the Grid appearance to match your company’s color scheme, customizing some of the existing themes or creating a new one with the Kendo UI Theme Builder is what you are looking for. The Grid itself offers a rich set of templates (row template, toolbar template and a detail template), with which developers can configure the visual and functional layout of the component to meet specific project requirements.

Other essential features of a grid when building business applications that you can take advantage of with Kendo UI are the Keyboard navigation, Localization (Globalization), and RTL Support. The keyboard support provides quick access to available Grid features without the need to interact with a mouse.

A good web app is not only useful, fast and great to look at, but also accessible for all people. From a legal point of view, depending on what countries you do business with, there are different accessibility standards. Kendo UI enables you to do the right thing and makes compliance easy by providing extra features to help improve accessibility for your users. Our Grid component complies with the Section 508 and WCAG 2.1 guidelines and includes WAI-ARIA support, ensuring that people with disabilities are able to work with it.

Moreover, the Kendo UI grid exposes a rich API and events which provide easy configuration or extension points for custom functionality on top of the built-in features.

Because of its advantages, plus the high-quality technical support we offer, the Kendo UI Grid component is used by numerous large and small businesses and organizations. If you need a feature that hasn’t been added yet, you can always use the Kendo UI feedback portal to tell us what you need.

Sounds complex? Everything is meticulously documented. If you don’t find the learning resource you need, you can always submit a ticket, free with your 30-day trial or once you purchase a license.

Trial | Demos | Documentation | Dashboard Application | Three-Part Blog Series

Kendo UI Angular Grid

Kendo UI for Angular includes more than 60 native Angular UI components, built from the ground up and continuously optimized for performance. Engineered specifically for Angular, they enable developers to take full advantage of the framework’s native performance capabilities like Ahead of Time Compilation (AOT), Angular Universal, and Tree Shaking. In short, with this toolset you can quickly build blazingly fast Angular applications.

Besides the essential features such as paging, editing, sorting, filtering, grouping, different scroll modes and export (PDF and Excel), the Angular Grid provides advanced ones such as master-detail grid, detail row template, toolbar template and responsive design. 

The Kendo UI data-binding directive is a powerful feature of the grid that you’ll want to use if you need to manipulate the data in the grid, be it through filtering, sorting or grouping. It simplifies the handling of data operations by cutting down the repetitive boilerplate code.

The Kendo UI for Angular Grid is an enterprise-ready Grid component in the full sense of the word, complete with performance tips, globalization, keyboard support and accessibility compliance, reordering of rows and context-menu. The Grid also exposes a rich API which provides easy configuration for more specific scenarios.

Styling the component is a necessary step you can handle in two ways: install one of the Kendo UI themes for Angular (Default, Bootstrap or Material) or use our Theme Builder web application to make the grid match your stylesheet. For more information on how to add the styles, refer to the documentation on styling.

Trial | Demos | Dashboard Progressive Web Application | Getting Started Video Tutorial | Deep Dive Blog Post

KendoReact Grid

If your business requirements are to build a complex React application in a short time, the KendoReact native components library will help you handle this challenge and create a robust and user-friendly application. This component library has been built from the ground up and is specifically designed for responsive web development with React.

The components are fully based on the approaches that the React framework implements, and each control provides various options for high-level customization. The flexibility of the KendoReact suite enables the neat integration of the components with almost all libraries which are related to the React framework, including: GraphQL, Material UI, React Final Form, Redux Form, Redux Store, Redux Undo, and Theme Builder swatches.

When setting out to build huge web applications where data is updated on a regular basis, the KendoReact Grid is the right tool. It provides a full spectrum of configuration options, from standard operations (page, edit, filter, group, sort, select, and export to PDF and Excel) to more complex features such as hierarchy, frozen columns, column menu, detail row, row reordering, scroll modes and so on.

For developers who need to extend the existing functionalities, there’s the Grid API.

The KendoReact Data Grid allows you to use design paradigms like Twitter Bootstrapand Google's Material Design by just adding a single CSS reference. More information about the available themes is provided in the respective articles: Bootstrap Theme, Default Theme, Material Theme.

Trial | Demos | Progressive Web Application with Redux | Getting Started Video Tutorial | Overview Blog Post

Kendo UI Vue Grid

Vue is a popular emerging framework whose adoption is growing rapidly in web applications. To make these applications even better and faster, you can take advantage of the Kendo UI for Vue suite. It is a complete UI component library for responsive web apps. To give our users the best performance and feature set, the Grid component in our Vue library has been completely native-built with Vue and has no other library dependencies. The rest of the Kendo UI components in this library are available as Vue-wrapped versions of our jQuery library components.

The Kendo UI for Vue components have also built-in functionality to support the native Vue reactivity, which is achieved through the usage of their API methods. That enables Vuex to automatically propagate changes to the Kendo UI components and update them along with data and state changes. This makes the Kendo UI for Vue suite fully integrable within Vuex environments. For more information on the subject refer to the Vuex Integration article.

The Vue Grid component gives you the ability to edit, page, sort, and filter your data. It also supports grouping and displaying aggregate calculations at the bottom of the group. Other useful features you can benefit from are virtualization, resizing, reordering and multi-column headers, to name a few.

On top of that, you have all the accessibility features Kendo UI is known for such as Keyboards support, Section 508, WAI-ARIA support and WCAG 2.1 compliance.

You can easily integrate this powerful Grid component into your Vue.js project and take advantage of all its great features. It is also a perfect fit for creating highly adaptable user interfaces and Single-Page Applications (SPAs). The Grid has Default and Bootstrap Sass based themes that can be easily customized to fit your colors thanks to the Theme Builder app. 

Trial | Demos | Dashboard Application | Getting Started Video Tutorial | Overview Blog Post

Common Features of All Technologies

Themes

All grids have three Sass-based themes – Default, Bootstrap and Material.  You can also take advantage of the Theme Builder application, which enables you to create new themes or customize the existing ones of each framework.

Unlimited Product Support

We’re proud to provide a support service that our customers love. Kendo UI offers unlimited support delivered by the engineers of the product with a 24-hour guaranteed response time (with Priority Support), Monday through Friday. For time-critical development projects, advanced support options are available including shorter response times and even live phone support.

Comprehensive Toolset

We provide you with a full toolbox. You can show your data in grids, dropdowns, a variety of charts and many other components that will delight your users.

The Kendo UI Grid: Your Best Option for Complex JavaScript Apps 

The Kendo UI Data Grid components provide the most advanced data options for your complex web applications. We provide components that are built specifically for each of the major JavaScript frameworks, whether that’s basic jQuery, or Angular, React, or Vue. This gives you all of the native features of each technology along with a high-performance, optimized data display and manipulation solution. And what if you need to change technology environments? Moving from a Kendo UI Grid in one framework to another is easy.

The benefits of the Kendo UI Grid don’t stop with just better integrations: we provide a comprehensive feature set that is completely customizable. The Grid offers over 100 parameters that can be quickly and easily set to control how the grid looks and acts in your application. You can expose only the features that make sense for your application without having to change any code just by turning individual features on and off with a simple parameter.  This means that you get the exact feature set that you want, quickly customized to your specific requirements.

While our Grid is the flag-ship of the Kendo UI libraries, it is only one component in a rich library that provides all the components a developer could need for any complex modern application. From advanced charts, schedulers, and date-pickers to drop-downs, editors, and switches, Kendo UI provides the full spectrum of UI components.

The Kendo UI components integrate easily with your applications and make coding simple. But coding is only part of a complete integration. You can spend your time focusing on the core functionality of your applications. Build better web apps faster with Kendo UI.

When it comes to development tools, where is the industry headed? in this Slack chat, members of our Developer Relations team weigh in with their thoughts.

There's a lot of buzz in the industry around so called "low code" or "no code" or "high productivity" solutions. As a rule, these tools rely upon a graphical user interface (GUI) to help build tools without code, sometimes even using drag-and-drop interfaces to build applications. These sorts of tools have a long and somewhat sordid history among developers, which has led them to be somewhat naturally distrustful of them.

Several members of the Progress Developer Relations team decided to have a Slack chat discussion to take a look at the history of these tools and where we think they are going. While (full disclosure) Progress has a new tool in development that falls within this category, we tried to take an honest look from a developer perspective.

TJ VanToll: Hey everyone

This topic is funny to me because when I started my career as a front-end developer, GUI tools like Microsoft FrontPage and Adobe Dreamweaver were serious software used to build serious stuff. But nowadays these tools have fallen out of favor (to say the least), and most front-end tools are now command-line- or terminal-based libraries. With that in mind, our rough agenda for today's discussion is:

• What GUI tools have we enjoyed using over the years?
• What GUI tools have we not enjoyed using?
• Where is the industry heading—more command-line tools, or the resurgence or GUI tools?

Let's start with the first question.

Rob Lauer: Not to date myself, but the first GUI tool I can remember using was the built-in HTML editor that shipped as part of Netscape!

TJ VanToll: OMG Netscape had a built-in HTML editor? Do images exist?

Rob Lauer: Netscape Composer I believe it was called? It eventually became part of a monolithic Netscape distribution. Hey, it could edit tables.

Jen Looper: Rob, is this what you used?

Rob Lauer: Yes!  ❤️

TJ VanToll: Web Page authoring is easy! LOL at the “ABOUT COMPUTERS” link.

Brian Rinaldi: I’ll admit that I started learning development using all the GUI tools from FrontPage then to Dreamweaver and Flash and Director and finally onto ColdFusion Studio. This tells you that: a) yes I am old; and b) I don’t have a problem with GUI tools altogether.

In fact, I would say that I have often struggled with the transition to command-line based development

Jen Looper: I am wondering a bit about the first sentence in TJ's opening statement. Was Dreamweaver considered a serious tool, or was it a way for Adobe to onboard more people into their stack via the frontend?

I remember using Dreamweaver and Flash but the minute you opened up the code to see what was going on, or where bugs were, it was a giant mass of spaghetti. I think this is a chronic issue with these tools. More Dreamweaver than Flash, I suppose.

Rob Lauer: Jen brings up a great point - and the Achilles heal of these GUI tools.

Brian Rinaldi: Jen, agreed. Though this is where I think a distinction has to be made. Some GUI tools are drag and drop while others are more like an IDE with additional tooling in the UI rather than a command line interface. For example, you could use Dreamweaver as a full-on drag-and-drop tool or you could just use it in code mode.

Jen Looper: Flash was something else as well, it was a full studio to author all your animations, tweening, and everything. You kind of had to dive into ActionScript, though, at the end of the day.

Rob Lauer: In defense of these tools - this is how I learned HTML. I dragged-and-dropped a table onto my canvas, then switched to the code view to see what was actually generated. Composer (and...to also date myself...Adobe Pagemill) created very clean HTML that was easy to read and learn from.

Brian Rinaldi: I remember using Flash Builder (for Flex development…and, yes, we’ve already covered that I am old) and it had a drag-and-drop interface which none of us generally used.

Jen Looper: Getting misty eyed over the idea of dragging and dropping tables…

Rob Lauer: > right click > add column. Done!

Jen Looper: Last night I was in this world just a little, helping my daughter set up a web site for a political campaign in our town. We had to choose between Wix, SquareSpace, and Wordpress. Not a hint of code in sight.

TJ VanToll: And did they work well?

Jen Looper: It came down to $$$ - as in, we have none. So Wix and SquareSpace went off the table. Also we both have more experience with Wordpress and, honestly, it gets the job done.

Rob Lauer: So somewhere these tools went wrong. I'm thinking of the .NET 1.1 days with Visual Studio.NET and its drag-and-drop capabilities that would apply absolute positioning to all elements. Awesome for the web…

TJ VanToll: FrontPage is probably the most notorious for generating nonsense.

Rob Lauer: As app complexity ⬆️, code quality ⬇️?

Jen Looper: Maybe they went wrong with the proliferation of browsers and screen sizes. That’s super hard for these tools to handle.

Rob Lauer: True - yes kids, there was a day when you had to sniff for IE vs Firefox vs Safari vs Chrome

Jen Looper: I remember it well…

TJ VanToll: The only thing that surprises me about the above screenshot is that the tag names are not in all caps.

Brian Rinaldi: Adobe tried to solve the drag-and-drop responsive design thing with Edge Reflow. I think they abandoned it.

Rob Lauer: Adobe seems to have the most storied history, especially with the Macromedia acquisition.

Brian Rinaldi: That’s the thing about full drag-and-drop tools is that we’ve seen so many of them fail over the years. It’s like they eventually reach the upper limit of their capability and once people surpass that in terms of site/app complexity, the tool seems antiquated.

Jen Looper: I think the impetus behind these tools is the need to quickly see what you are building. That has been solved these days with nice, fast hot module reloading (HMR). I just saw a tweet about Gatsby + Sanity.io which allows you to have realtime collaboration and instant previews. The world is getting way fancier.

Brian Rinaldi: Yes, though the toolchain is getting complex.

Jen Looper: For sure!!

Using webpack for my "hello world" app pic.twitter.com/MmnXTl0ebw

— Tomasz Łakomy (@tlakomy) February 20, 2018

TJ VanToll: The only modern example I can think of a drag-and-drop tool that’s really good and generally liked is storyboards in Xcode. I think it shows you can do drag-and-drop, but that it’s really hard and you have to throw a lot of engineering muscle at the problem to get it right.

Rob Lauer: So do the best tools get you 80% of the way? Or are the best tools those that are very focused on specific tasks?

Jen Looper: TJ, you are obliged to use these tools to build an Apple Watch app, for the Storyboard composition, last time I was working with this stack. That works fine, but you are really locked into Xcode, then, if you want to release that app.

TJ VanToll: Ah good point. Lock in is another common downfall of these tools.

Jen Looper: Maybe that plays into Rob’s question. I think lock-in is a problem for a diverse developer base.

Rob Lauer: The "enterprise" doesn't seem to have a problem with lock-in though. Maybe we need to differentiate between types of developers. cough "citizen developer" cough

Jen Looper: True, true!

Brian Rinaldi: I’d answer Rob’s question by saying that, in my experience, the best tools recognize the limits of drag-and-drop and let you go beyond that when you need to or are ready.

TJ VanToll: Agreed. Flash meets that criterion, as does Xcode.

Rob Lauer: I think you are right as well.

Jen Looper: Ideally, you can easily access your code and it’s readable. Honestly Wordpress does that.

Rob Lauer: So the best tool will get me 80% of the way, then let me take over. But is it a one-way street? Many times generated code, that is subsequently edited, cannot be re-edited in the original tool

Jen Looper:

Brian Rinaldi: I agree, though I think that round-tripping usually a problem with the full drag and drop interface tools.

To bring up another Adobe example, Flash Catalyst was going to be a way to design Flex/Flash application interfaces using drag and drop. Everyone wanted it until they actually got it. The lack of round-tripping killed it out the gate (they eventually added it, but I think in the end it was too limited or too late).

Rob Lauer: Let me propose one successful implementation of this - albeit a somewhat limited one, and very self-serving considering this group . That would be NativeScript Playground. It provides drag-and-drop UI components, with code generation, but the "canvas" is your editor and your UI is reflected on the device. Maybe a bit outside of the scope of what we are talking about though.

Brian Rinaldi: NativeScript? Tell me more!

Jen Looper: I really like that the code is right in front of you in NativeScript Playground, it’s the focus, not backgrounded.

Rob Lauer: So what GUI tools, in the past/present, were/are at least commercially successful? Dreamweaver? Xcode? Android Studio?

Brian Rinaldi: Dreamweaver is still around.

Rob Lauer:

Initial release: December 1997; 21 years ago

Jen Looper: I see Dreamweaver is still around and I kind of want to try it again.

TJ VanToll: Interestingly, a lot of these tools don’t make money directly, but try to help suck you into their ecosystem, as Jen mentioned earlier. Xcode and Android Studio for example are free at least.

Rob Lauer: Excellent point.

TJ VanToll: NativeScript Playground is free too

Brian Rinaldi: I think that gets at your final question, TJ:

Where is the industry heading—more command-line tools, or the resurgence or GUI tools?

Rob Lauer: There is a lot of pendulum swinging in tech. CLI was shunned for years, now in the last 7-8 years it's seen a resurgence. Now maybe it's time for GUI tools to take over again..?

TJ VanToll: My thought—for the front-end world specifically, things have gotten increasingly complex over the last decade, which I think will make devs more willing to use a tool that hides some of this complexity.

npm install... pic.twitter.com/c0YCG9Rk9f

— Glen Arrowsmith (@garrows) November 21, 2018

Brian Rinaldi: It seems like there is a divergence. Most developers I encounter (granted, I’m in the JavaScript and front-end dev space mainly) are moving towards a command-line-based stack of tools. However, the industry seems to be moving towards supplying more GUI tools under the “high productivity” or “low code/no code” tooling umbrellas.

The latter seem to be specifically targeting large enterprises.

Jen Looper: I am thinking about this post by Chris Coyier that I recently read about this new industry split between those who are ‘UX Engineers’ and those who are ‘JS Engineers’. Maybe the former are more likely to use GUI tools, and the latter command-line tools.

The UX Engineers I know, however, seem to use Sketch for the most part.

Rob Lauer: Ionic has had a well-received (I assume) GUI tool for years, first called Codiqa, then Creator, now Ionic Studio. I definitely see some advantages with it if you are a hybrid developer. However, IIRC you are limited in how you lay out your elements (stack only), which to me is a deal-killer. There is also no backend integration built-in.

Jen Looper: Do tools like InVision allow you to see code?

Rob Lauer: I don't think so, but this brings up the realm of design tools -> code generation. Like going from Sketch to NativeScript or React Native Talk about ugly code generated...

Brian Rinaldi: Those solutions are definitely being worked on.

Jen Looper: It’s been done in the community, I haven’t personally tried it.

Rob Lauer: The problem with these tools is generally you are getting absolute positioning of your elements. This leads to a lot of extra code and unnecessary complexity.

Jen Looper: Looking at Sketch, it has a code export - I think for things like SVG generation, this could be super useful.

Rob Lauer: BuilderX is another example - super awesome design interface, but the exported code is jammed with absolute elements. Maybe it's me, but I spend 50% of my time doing pixel-tweaking in my layouts.

Brian Rinaldi: Jen and I both worked at Sun Life and I remember there being a wide range of applications within the company. Some were incredibly complex. Others solved smaller business problems, down to the simple “app” built in Access or (yikes!) Domino that often only had a couple of users. So I can kind of understand where these tools, even from a no-code/citizen developer standpoint, have a place within a large enterprise. It’s not like you need a single tool to solve all your problems.

Jen Looper: I think these tools can shine when they help with small pieces of the UI, like an SVG or a canvas element. When you expect that, in one drag, a few drops, and a click, that you have a fully responsive web site, that’s where the trouble starts

Rob Lauer: So the "best" GUI tool will be one that makes me, as a developer more productive, leveraging my existing enterprise data stores/services, doesn't get in my way when i want to edit code, and lets me back into a design canvas when i want to add additional functionality. Something like that

TJ VanToll: So there you have it. GUI tools are the best and also the worst! Any closing words?

Jen Looper: Moonshot, Rob! I think we should just go back to that Netscape composer

TJ VanToll: Simpler times.

Jen Looper: I think these tools did help onboard a lot of new people into the industry back in the day, and helped pushed the concept of 'good UI and UX' forward.

Brian Rinaldi: I’d say, development, even just web development, today is way bigger and more complex than when I started, which means there is room for a whole range of solutions because there are just so many apps needed and being created. Devs should use whatever makes them most productive in what they have to build.

Rob Lauer: Let me just end this with saying here at Progress we are working on a new tool that I think legitimately scratches all of these itches!

TJ VanToll: Spoiler alert!

TJ VanToll: Well there you have it. Feel free to continue the conversation in the comments with the tools you’ve enjoyed (and not enjoyed) using over the years. Oh, and if you’re interested in testing the super-secret tools we’ve been working on here at Progress, here are the details:

Soon we'll be launching a new tool to help you make web and mobile apps with Angular. You can add custom chat bots and connect to enterprise infrastructure, authentication, and other data sources without writing any code. Oh, and you'll always have full control and the ability to modify the Angular source code. Interested? Come build amazing apps with us. Join the invite list!

Rob Lauer: Adobe, if you're listening, bring back Pagemill!

Razzle is a tool that abstracts all complex configuration for SSR into a single dependency. Learn how to get started with Razzle in server-rendering React apps.

Setting up universal React applications is difficult and the configurations are not simple to handle. There are existing workarounds like using a framework like Next.js, forking a boilerplate, or maybe setting things up yourself.

All of these existing options have their pitfalls and, in some cases, provide you more future issues than you bargained for. This is where Razzle come in. Razzle is a tool that abstracts all the complex configuration needed for SSR into a single dependency, giving you the experience of create-react-app, but then leaving the rest of your app’s architectural decisions about frameworks, routing, and data fetching up to you.

With this approach, Razzle not only works with React, but also with Reason, Elm, Vue, Angular, and, most importantly, it’ll work with whatever comes next. In this post we are going to look at how to get started with Razzle and explore what features it brings to the table.

Installation

To install Razzle on your system, simply run the command:

$ npminstall -g create-razzle-app

This will install Razzle globally.

Since Razzle operates just like the very popular create-react-app construct, you can create a new Razzle app just the same way by running the create-razzle-app command:

    $ create-razzle-app my-app

Now to run the app, navigate into the app directory and run npm start:

    $ cd my-app
    $ npm start

This should now open up your app on localhost:3000, and you should get the default welcome page on the browser like this:

That’s it, you got yourself a React app with SSR all set up without a single configuration, just like CRA.

Razzle Basics

Create a custom component
Let’s demonstrate how to create a custom component in the Razzle application that we’ve just set up. Open the Home.js file in the src directory and update it with the code:

import React from'react';import logo from'./react.svg';import'./Home.css';classHomeextendsReact.Component{render(){return(<div className="Home"><p> Hello World !!</p></div>);}}exportdefault Home;

When you save, the browser will hot reload and you should be able to see your Hello World page showing up like mine here:

Routing and Navigation
One awesome feature of Razzle is that it uses React Router 4 by default, unlike Next.js. As a result, with Razzle, handling Navigation and Routing is a breeze. Since we already have a custom Home component, let’s see how we can create a new component and display some more custom content in it. We’ll create an About.js page and set it up like so:

import React from'react';import'./Home.css';classAboutextendsReact.Component{render(){return(<div><p> You've been routed to the About Page </p></div>);}}exportdefault About;

To route to this page we’ve just created, let’s update our App.js file like so :

import React from'react';import Route from'react-router-dom/Route';import Switch from'react-router-dom/Switch';import Home from'./Home';import'./App.css';import About from'./About';constApp=()=>(<Switch><Route exact path="/" component={Home}/><Route exact path="/about" component={About}/></Switch>);exportdefault App;

See how simple that was? Yeah, you did. Now when you navigate to localhost:3000/about you will be routed to our About page:

Now we have a small Razzle app we can extend to do exactly what we want—build it off to a full-fledged web app, build your next Airbnb, and so on.

Razzle commands

Just like CRA, Razzle has a ton of useful commands that let you speed up development and seamlessly work with the terminal. Here are a few you might find useful:

Start commands

    $ npm start 
    $ yarn start

Either of these commands will run the project in development mode. Once the command is executed and the server is running, you can view your application at http://localhost:3000. The page will reload if you make edits.

Build commands

    $ npm run build
    $ yarn build

These commands build the app for production to the build folder. The build is minified and the filenames include the hashes. Once the command executes, your app is ready to be deployed!

Production commands

    $ npm run start:prod
    $ yarn start:prod

This command will run the compiled app in production. You can again view your running application at http://localhost:3000.

More Features

Hot reloading
Like other modern frameworks, Razzle comes with universal hot module reloading, so both the client and server update whenever you make edits. No annoying restarts necessary. This is a wonderful thing, given that the app is rendered on the server.

Universal across all frameworks
Razzle runs two webpack instances. One handles the client bundle and another handles the server, which gives it the capability to function on all available frameworks since it’s basically dealing with webpack and not necessarily particular to React.

This functionality is also what makes it futuristic, as it can readily accommodate any new frameworks coming up in the future without major breaking changes.

Familiarity
Razzle comes with ES6 JavaScript goodies (through babel-preset-razzle) and the same CSS setup as create-react-app, which makes it very familiar to work with. There is a lot you can do with Razzle out of the box

Conclusion

Razzle is an alternative SSR framework for React and pretty much any other JavaScript framework available and to come. There are frameworks like Next.js and there’s equally the react-server, but all of these do not entirely solve the problems associated with server rendering.

Razzle is an improvement on what these existing technologies offer, as it not only gives more simplicity and flexibility, it also makes it possible to server-render any JavaScript application irrespective of what framework it was initially built on. To gain in-depth knowledge about Razzle and find out more awesome features, take a deeper look at the Razzle documentation.

For More Info on Building Apps with React

Want to learn more about creating great apps with React? Check out Kendo UI for React, our complete UI component library for React that allows you to quickly build high-quality, responsive apps. It includes all the components you’ll need, from grids and charts to schedulers and dials. Learn more about how you can get started with KendoReact.

Learn everything you need to know about Fiddler’s composer tab and how to use it. Part 1 of a series.

Fiddler is well known for its ability to capture HTTP(S) traffic, which makes it possible to debug any website or application. However, there is another feature that may be just as useful, and that’s creating HTTP(S) requests. This gives you the ability to communicate with the web server with precision, thus calling only the resources you want. Something that is hardly achievable in a real-life application.

Composer Tab

You can access everything you need to create new request from the Composer tab in Fiddler.

It supports two different modes, but you’ll probably need the Parsed one. There you can specify the HTTP method, the URL, the HTTP version, the Headers and the Body of the request. On the right you can find the History panel where you can easily load a previously executed request.

Sending GET Request

This is the most used request type. Every time you type an URL inside your browser, you’re sending a get request to the server. To create a GET request inside Fiddler, choose the GET method and type the server URL in the URL box. Then click the Execute button.

NOTE: Once the request is sent to the server, use the Inspectors to inspect the response. There is a different inspector type for almost all response content types like JSON, Web, etc. This way you can verify if the response you’re getting is as expected.

Sending POST Request

Unlike the GET request, where you should specify only the URL, in POST requests, there is an additional optional parameter - Request Body. These requests are used when you want to send data back to the server. The most common usage is when you submit a form in a website. To send a new POST request, choose POST for method type, type the URL, enter the body content and click Execute.

Other Methods

Fiddler can create any type of request that is supported by the HTTP standard in a similar manner. Just choose the HTTP method and type the parameters of the request.

Working with Headers

HTTP headers are the way the way client gives additional context to the server. Any header consists of a case-sensitive name followed by a “:” then by its value (without line break). You can add a header to your request by appending inside the Header box – every header on new line. A list with all HTTP headers can be found here.

Conclusion

This is all you need to know about Telerik Fiddler’s composer and how it works. It gives you everything you need to create all kind of HTTP request you need. In the next blog post in this series, we will cover different user scenarios where the Composer can be very useful.

If you have any questions or comments, don’t hesitate to drop a line or two below. Any feedback is highly appreciated.

Monitoring your CI/CD daily can sometimes be a very cumbersome job. Learn how you can make your life easier by posting your Test Studio results directly in Slack.

When it comes to testing, if your organization is using many different tools in its build chain, you probably need to monitor several different UIs. That could be simplified though, if most of your monitoring could be done in one place. If, by chance, your team uses Slack for collaboration, you can use it for more than just messaging. Slack has great extensibility through its APIs.

Telerik Test Studio allows for easy integrations with other tools and solutions, thanks to its execution extensions. In this blog post I will show you how easily you can build an extension that will post your test list run results in Slack.

Building an Test Studio Extension for Slack

Creating Web Hook

using ArtOfTest.WebAii.Design;

using ArtOfTest.WebAii.Design.Execution;

using ArtOfTest.WebAii.Design.ProjectModel;

using Microsoft.Win32;

using SlackBot.Data;

using System;

using System.Data;
 

namespace SlackBot

{
    public class SlackExtension : IExecutionExtension
    {
        private string urlWithAccessToken = " ";
 
        // Web hook registry key
        private const string SLACK_BOT_REG_KEY = @"Software\SlackBot";
 
        public void OnBeforeTestListStarted(TestList list)
        {
            // Get Web Hook URL from Windows Registry
            using (var key = Registry.LocalMachine.OpenSubKey(SLACK_BOT_REG_KEY))
            {
                if (key != null)
                {
                    var url = key.GetValue("URL");
                    if (url != null)
                    {
                        this.urlWithAccessToken = url as string;
                    }
                }
            }
        }
 
        public void OnAfterTestListCompleted(RunResult result)
        {
            if (!string.IsNullOrEmpty(this.urlWithAccessToken))
            {
                var client = new SlackClient(this.urlWithAccessToken);
                var msg = MessageCreator.GetMessage(result);
                client.PostMessage(msg);
            }
        }
 
        public void OnAfterTestCompleted(ExecutionContext executionContext, TestResult result)
        {
        }
 
        public void OnBeforeTestStarted(ExecutionContext executionContext, Test test)
        {
        }
 
        public DataTable OnInitializeDataSource(ExecutionContext executionContext)
        {
            return null;
        }
 
        public void OnStepFailure(ExecutionContext executionContext, AutomationStepResult stepResult)
        {
        }
    }

}

using Newtonsoft.Json;

using System;


namespace SlackBot.Data

{
    public class Message
    {
        [JsonProperty("channel")]
        public string Channel { get; set; }

        [JsonProperty("username")]
        public string Username { get; set; }

        [JsonProperty("text")]
        public string Text { get; set; }

        [JsonProperty("attachments")]
        public Attachment[] Attachments { get; set; }
    }

    public class Attachment
    {
        [JsonProperty("fallback")]
        public string Fallback { get; set; }

        [JsonProperty("color")]
        public string Color { get; set; }

        [JsonProperty("pretext")]
        public string Pretext { get; set; }

        [JsonProperty("author_name")]
        public string AuthorName { get; set; }

        [JsonProperty("author_link")]
        public Uri AuthorLink { get; set; }

        [JsonProperty("author_icon")]
        public Uri AuthorIcon { get; set; }

        [JsonProperty("title")]
        public string Title { get; set; }

        [JsonProperty("title_link")]
        public Uri TitleLink { get; set; }

        [JsonProperty("text")]
        public string Text { get; set; }

        [JsonProperty("fields")]
        public Field[] Fields { get; set; }

        [JsonProperty("image_url")]
        public Uri ImageUrl { get; set; }

        [JsonProperty("thumb_url")]
        public Uri ThumbUrl { get; set; }

        [JsonProperty("footer")]
        public string Footer { get; set; }

        [JsonProperty("footer_icon")]
        public Uri FooterIcon { get; set; }

        [JsonProperty("ts")]
        public long Ts { get; set; }

        [JsonProperty("mrkdwn_in")]
        public string[] Mrkdwn_in { get; set; }

    }

    public class Field
    {
        [JsonProperty("title")]
        public string Title { get; set; }

        [JsonProperty("value")]
        public string Value { get; set; }

        [JsonProperty("short")]
        public bool Short { get; set; }
    }

}

using ArtOfTest.WebAii.Design.Execution;

using System;


namespace SlackBot.Data

{
    static class MessageCreator
    {
        private const string GREEN = "#7CD197";
        private const string RED = "#F35A00";

        internal static Message GetMessage(RunResult result)
        {
            if (result.PassedResult)
            {
                return CreateSuccessMessage(result);
            }

            return CreateFailMessage(result);
        }

        private static Message CreateSuccessMessage(RunResult result)
        {
            var msg = new Message();

            msg.Attachments = new Attachment[1];
            Field[] messageFields = new Field[2];
            messageFields[0] = CreateHeader(result.Name);

            messageFields[1] = new Field
            {
                Title = $"Result",
                Value = $"All tests passed.",
                Short = true
            };

            msg.Attachments[0] = new Attachment
            {
                Title = $"Test list execution done.",
                Color = GREEN,
                Ts = UnixTimeNow(),
                Fields = messageFields
            };

            return msg;
        }

        private static Message CreateFailMessage(RunResult result)
        {
            var msg = new Message();

            msg.Attachments = new Attachment[1];
            Field[] messageFields = new Field[2];
            messageFields[0] = CreateHeader(result.Name);

            messageFields[1] = new Field
            {
                Title = $"Result",
                Value = $"{result.PassedCount}/{result.AllCount} tests passed.",
                Short = true
            };

            msg.Attachments[0] = new Attachment
            {
                Title = $"Test list execution done.",
                Color = RED,
                Ts = UnixTimeNow(),
                Fields = messageFields
            };

            return msg;
        }

        private static Field CreateHeader(string name)
        {
            return new Field
            {
                Title = $"Test list",
                Value = $"{name}",
                Short = true
            };
        }

        private static long UnixTimeNow()
        {
            var timeSpan = (DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0));
            return (long)timeSpan.TotalSeconds;
        }
    }

}

using Newtonsoft.Json;

using SlackBot.Data;

using System;

using System.Collections.Specialized;

using System.Net;


namespace SlackBot

{
    public class SlackClient
    {
        private readonly Uri _uri;

        public SlackClient(string urlWithAccessToken)
        {
            this._uri = new Uri(urlWithAccessToken);
        }

        //Post a message using a Message object 
        public void PostMessage(Message message)
        {
            var messageJson = JsonConvert.SerializeObject(message);

            using (var client = new WebClient())
            {
                var data = new NameValueCollection();
                data["payload"] = messageJson;
                var response = client.UploadValues(this._uri, "POST", data);
            }
        }
    }

}

Interested in integrating chatbots in your mobile app but don't know where to start? Check out Sam Basu's engaging interview with James Montemagno on The Xamarin Show on Channel 9. In the short video, Sam lays the foundation for everything you'd need to build the bot and then walks you through a sample app. 

In a recent episode of James Montemagno’s The Xamarin Show, he caught up with our very own Sam Basu to talk about Conversational UI for Chatbots.

Throughout his lively and entertaining conversation, Sam explains what a bot is, talks about how to create one and he even shows how you can use the Progress Telerik Conversational UI controls.

What is a Bot & How to Build it

He starts by explaining the landscape, or the conversational bot ecosystem. He touches on agents, platforms, what makes a bot smart (rules, NLP, logic, etc) and then talks about the different bot frameworks.

Sam then went into a little more detail about the Microsoft Bot Framework, as that is where he will use for the demo he shares later in the interview.

For those of you interested in building a bot, he does a nice job of laying out how to get started and what you would need. You can also learn more about what goes into a bot by reading this blog post.

He nicely and succinctly explains the tools you would need to build your bot, the ways you can connect it, and some of the services you can use.

As you might expect, Sam also shared more about our Conversational UI components across all products before diving into his demo. If you haven’t already played with them, it is worth a look. They are chatbot framework agnostic and able you – whether you are creating a .NET or JavaScript web, mobile or desktop app – to create modern chatbot experiences. If you have any sort of Telerik or Kendo UI license, you have access to these components. If you don’t have a license, you can download a trial. But I digress…

Once he’s laid the foundation for what you would need to build a bot – from the backend all the way to the frontend, he walked through how to actually build a chatbot in a Xamarin application. His tutorial walks you through a sample app which is available with your Telerik UI for Xamarin license or trial. Using Visual Studio for Mac, Sam demonstrates how to build a chatbot integrated iOS app.

If you are interested in learning how he did it, tune in here:

And remember, chatbot controls are available with all of our Telerik and Kendo UI toolsets. Happy coding!

Let's learn how to create a Grid with the new native Grid in Kendo UI for Vue. The new native Grid is built with Vue from the ground up.

In the first post in this two part series, we will learn how to create a Kendo UI native Grid for Vue. The new native Grid is built with Vue from the ground up. One way the native grid differs from the grid wrapper is that the native grid doesn’t depend on jQuery. The other difference is that the DataSource component is no longer required to load data. The data can be defined directly inside the component. Coming up, we will see how to create a native grid using local and remote data. Then we will add a pager to the grid to split the data into pages.

Creating the Grid

First, we will initialize our project using the Vue webpack-simple template. Inside the project directory, we will install a theme, the grid, the globalization package, and the vue-class-component using the following commands:

npminstall --save @progress/kendo-theme-default
npminstall --save @progress/kendo-vue-grid
npminstall --save @progress/kendo-vue-intl 
npminstall --save vue-class-component

Next, we import the theme and the grid in our main.js file and register the grid component globally.

import Vue from'vue'import App from'./App.vue'import'@progress/kendo-theme-default/dist/all.css'import{ Grid }from'@progress/kendo-vue-grid'

Vue.component('Grid', Grid);newVue({
  el:'#app',
  render: h =>h(App)})

In this first example, we will define our data locally. The data is provided by uinames.com. We will add our grid component to the template in the App.vue file and set the data-items and columns property. The data-items property sets the grid’s data. The columns property sets the fields of the grid. This is the updated App.vue file:

<template><divid="app"><Grid:style="{height:'200px'}":data-items="dataItems":columns="columns"></Grid></div></template><script>exportdefault{
  name:'app',data(){return{
      dataItems:[{"name":"Ruxanda","surname":"Corbea","gender":"female","region":"Romania"},{"name":"Paula","surname":"Acevedo","gender":"female","region":"Mexico"},{"name":"David","surname":"Dediu","gender":"male","region":"Romania"},{"name":"Urmila","surname":"Belbase","gender":"female","region":"Nepal"}],
      columns:[{ field:'name'},{ field:'surname'},{ field:'gender'},{ field:'region'}],};}}</script><style>#app{font-family:'Avenir', Helvetica, Arial, sans-serif;color:#2c3e50;margin-top:60px;}</style>

Using the same data, we will build a grid from a remote data source. We will start with an empty dataItems array. This time we will use axios to fetch the data from an API. Then we will fill the dataItems array with the result. The API call will take place within the mounted lifecycle event. First, we will install axios with the following command:

npminstall --save axios

Then we import axios in the script of our App.vue file and load the data from within the mounted lifecycle event. This is the updated script:

<script>import axios from'axios'exportdefault{
  name:'app',data(){return{
      dataItems:[],
      columns:[{ field:'name'},{ field:'surname'},{ field:'gender'},{ field:'region'}],}},mounted(){
    axios
      .get('https://uinames.com/api/?amount=25').then(response =>{this.dataItems = response.data
      })}}</script>

Adding Paging

By default, all of the records in the grid show on one page. To implement paging, we need to configure several properties. We must set the pageable, skip, take, and total properties of our grid as well as the pagechange event. The pageable property configures the pager for the grid. The skip property is the number of records the pager will skip. The take property is the number of records to show for each page. The total is the total number of data items. And pagechange is the event that fires when the page is changed. This is the updated template:

<template><divid="app"><Grid:style="{height:'200px'}":data-items="result":columns="columns":pageable="true":skip="skip":take="take":total="total"@pagechange="pageChange"></Grid></div></template>

The data-items property should be set to the data for the current page. To achieve this, we create a computed method named result that calculates which records to take from the list of data items. The skip property is initialized to 0 and take is initialized to 10. We create a computed method for total that returns the number of data items. Last, we add a pageChange method which updates the skip and take properties. This is the updated script:

<script>import axios from'axios'exportdefault{
  name:'app',data(){return{
      dataItems:[],
      columns:[{ field:'name'},{ field:'surname'},{ field:'gender'},{ field:'region'}],
      skip:0,
      take:10,}},
  computed:{result(){returnthis.dataItems.slice(this.skip,this.take +this.skip)},total(){returnthis.dataItems.length
    }},mounted(){
    axios
      .get('https://uinames.com/api/?amount=25').then(response =>{this.dataItems = response.data
      })},
  methods:{pageChange(event){this.skip = event.page.skip;this.take = event.page.take;}}}</script>

See the final project repo here: https://github.com/albertaw/kendoui-vue-native-grid

Summary

First, we saw how to create a grid using local data. That required setting the data-items property equal to a list defined in the data and setting the columns property. Then we created the grid from a remote data source by using axios to make an API call within Vue’s mounted lifecycle event. Last, we added paging to the grid. We had to set the pageable, skip, take, and total properties and handle the pagechange event.

In the next post, we will see how to edit records in the grid.

Resources

• Project Repo
• Vue Grid Native Overview
• Vue Grid Native Paging
• Vue Grid Native API

Try out Kendo UI for Yourself

Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.

Start My Kendo UI Trial

Angular, React, and jQuery Versions

Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, KendoReact, or Kendo UI for jQuery.

Resources

• Kendo UI Vue Docs and Demos
• Vue.js Webpack-Simple Template
• Kendo UI Online Editor

Learn the basic steps to setup a React application using Flexbox to make a responsive grid.

In our previous article, Creating a Responsive Layout in React, we started by learning how to setup a basic responsive layout in our React application using Flexbox and media queries. We used a React Hooks npm package to help with breakpoints and another package for helping with responsive images (picture tag). We also showcased the KendoReact Menu component, and by the end, we had a fairly responsive demo that we're going to build on in this article.

No different from UI, layout takes time and baby steps. We can keep building and working to refactor and improve what we already built, as well as learn some new techniques around responsive layout and slowly incorporate those ideas. The next thing we should work on in this application is bringing in some type of responsive grid. I would like to use another npm package to do this, it's called react-simple-flex-grid.

Our starting point will be a StackBlitz demo which is simply a fork of the demo where we left off in the last article. I would recommend making a fork of this demo if you plan to follow along. Otherwise, just read on and understand that you can open up any of the demos I provide to play with the code at any stopping point in the post. I will provide several demos at various points below.

Our application to start with should look like the image below:

It's not going to win any awards, but we are not really focusing on look and feel yet, we are still getting our sea legs in this constantly moving and resizing responsive world. And we have already learned some very basic layout techniques to build on. With that said, in this part of the blog series I want to focus on creating a responsive grid that we can use in our application so that we don't have to bring in something like Bootstrap just to use their grid.

I'm going to mock-up something that we can try and build that will utilize this grid for many breakpoints. The idea will be a grid of logos from companies that use our product. This is a pretty standard thing that companies do on their website and the same concept can be applied to many different uses. I first need to get a number of logos that we can use. I will upload them to imgur so we can use them with StackBlitz easily. We will display these images in a grid showing four wide at a large resolutions, three wide at medium resolution and two wide at a small resolution.

I'm going to fork our demo and start working on our first set of changes.

First order of business is to create a list of companies in a .json file. Before we make the list of logos into a grid, we should first worry about writing some code that will map each company from our list of names into some markup in our JSX. Our companyList.json files will simply contain an array of objects. Each object is a company, and it has a name and an image url. I will upload an image for each company to imgur.com that we can use for our image.

Add a companyList.json file.

[
  { "name": "Nasa", "image": "https://imgur.com/RTFOOHR" },
  { "name": "Microsoft", "image": "https://imgur.com/yln0oYC" },
  { "name": "Phillips", "image": "https://imgur.com/ZHKnVr8" },
  { "name": "Fox", "image": "https://imgur.com/Hrzbo49" },
  { "name": "Sony", "image": "https://imgur.com/Ld5Ux3g" },
  { "name": "IBM", "image": "https://imgur.com/rg7RAdm" },
  { "name": "Toshiba", "image": "https://imgur.com/aj9vfmu" },
  { "name": "Volvo", "image": "https://imgur.com/hTkpXvw" }
]

We need to create a Companies.jsx page. These component files don't have to use the .jsx format, they could just as well use .js as the file extension. When I create a new component, I typically use .jsx.

import React from 'react';
import companyList from './companyList.json';

const Companies = () => {
  return (
    <div className="companies">
      {companyList.map(co => <div>{co.name}</div>)}
    </div>
  );
}

export default Companies;

Nothing too complex here, we import react and our company list. We create a functional component that simply maps over the companies list and sticks the name value inside of a div. This is repeated for each company, and now we can think about how we will go from this to building a flexible grid for each of the images instead.

Now let's add the following import to the main.js page:

import Companies from './Companies';

And then we'll display our Companies component below our information about Kendo UI. The div with the class name of kendo-details will now look like the code sample below:

<div className='kendo-details'>
    <h2>React Components</h2>
    <p>Building UI for business apps is hard, even on React. Make it easy with our native React UI and DataViz components.</p>
    <h2>Companies Using Kendo</h2>
    <Companies />
</div>

At this point in time and if you have been following along, your demo will match the StackBlitz below:

Let's Talk About the Images

The images in this list are 600 x 600 px and we don't want to show them at that resolution, so I wanted to just loop over the names to ensure our logic and code was working. I actually want to have a different image for each breakpoint, but let's take baby steps to get there. This would mean having 600 pixels be the size of our images to show above large breakpoints. 300 pixels would be the size of our images above the medium breakpoint and until the large breakpoint. And finally, our images on small would be 150 pixels wide.

But for now, we can just resize them to take up 100% of their space.

Let's add the package we want to use for a Flexbox grid solution: react-simple-flex-grid. I selected this package for its ease of use. I tried out several packages for React that provided a similar component model. Instead of creating divs, we will create <Row></Row> and <Col></Col> tags. This library, although simple, lets us do some complex stuff. To create a grid we are going to use only one Row. Inside that Row tag, we are going to repeat our a Col component for every item in our list. We can then provide instructions for each breakpoint.

Here is how I want to use their component API:

Working off the default 12 column Grid, I want:

• At XSmall: Each Col component will take up 6 columns of each row
• At Small: Each Col component will take up 4 columns of each row
• At Medium: Each Col component will take up 3 columns of each row
• At Large: Each Col component will take up 2 columns of each row
• At XLarge: Each Col component will take up 2 columns of each row

This Also Means:

• At XSmall: There will be 2 images per row
• At Small: There will be 3 images per row
• At Medium: There will be 4 images per row
• At Large: There will be 6 images per row
• At XLarge: There will be 6 images per row

To do this, we will update the piece of JavaScript that maps the companyList to generate what we need to use the components supplied by react-simple-flex-grid. By default, the breakpoints are:

• XSmall: 0-767
• Small: 768-991
• Medium: 992-1199
• Large: 1200-1599
• XLarge: 1600-infinity

With all of that in mind, just by glancing at the GitHub or NPM page for the react-simple-flex-grid, you should see that the JSX we need to write would be:

<Row gutter={40}>
  {companyList.map(co => 
    <Col 
      xs={{ span: 6 }} sm={{ span: 4 }} md={{ span: 3 }}
      lg={{ span: 2 }} xl={{ span: 1 }}
    >{co.name}</Col>
  )}
</Row>

If we were to describe what our grid would look like above the medium breakpoint and below the large breakpoint, it would look like this:

But with just text inside each column, it looks nothing like what we want, so let's add the images. Update your code on the Companies component to return the following JSX:

const Companies = () => {
  return (
    <Row gutter={40}>
      {(companyList).map(co => 
        <Col 
          xs={{ span: 6 }} sm={{ span: 4 }} md={{ span: 3 }}
          lg={{ span: 2 }} xl={{ span: 1 }}
        ><img src={`${co.image}.jpg`} width="100%"/></Col>
      )}
    </Row>
  );
}

At this point in time and if you have been following along, your demo will match the StackBlitz below:

Now that we have a better way of laying out our page, I want to rethink our Flexbox layout. The custom work we did with the media queries in our CSS is not that pretty and it's much better to write clear concise code, including CSS. When I look back at the navbar and main code, I can't imagine really understanding it unless I wrote it. Also I don't think our goal is to write the CSS we need for the grid ourselves. That could be an entire article in itself. What we want is some type of component that can abstract the details of building a Flexbox Grid and make that technology available in a simple React Component system. I'm never shy about throwing code away. So let's take out the trash.

I think that with this new simple grid system we can achieve a similar layout, plus we can get rid of some of the confusing CSS we wrote before and use these Row and Col components from React Simple Flex Grid instead. We will have some CSS code and it will contain some breakpoints, but let's use the breakpoints that come default in the React Simple Flex Grid. After playing with the screen at different sizes I think my initial idea to have several breakpoints at such small sizes is not exactly what I want in the end. So I am going to remove the breakpoint at 415 pixels. Let's take a look again at what the default breakpoints are for this Grid system.

• XSmall: 0-767
• Small: 768-991
• Medium: 992-1199
• Large: 1200-1599
• XLarge: 1600-infinity

Looking at this set of breakpoints, I think that we can get away with just having two Header graphics. One of them will show up until 768 pixels. Then we will switch to a smaller square image. I have made two new images to use:

Our small image will need to be 767 pixels in width, that's because 767 pixels wide will be the largest it can display before hitting that breakpoint at 768 pixels

Our medium-up image will be 300 pixels in width, because that seems like the largest I will want to display that image for now. We could always create another image to serve much larger screens but for the sake of brevity let's go back to just serving small vs medium and higher.

Small:

Medium-Up:

To save a lot of tedious steps I think the best way to present these new changes using the React Simple Flex Grid is for me to wave a magic wand and show you an updated StackBlitz example that has been refactored. But I will explain what I have done in this refactor:

My idea here is to use our React Simple Flex Grid component instead of the custom Flexbox code we came up with. It will clean up our CSS and our HTML. I will also move the Kendo UI information section into its own component called KendoInfo, just like Companies has its own component. Our main.js file should be fairly simple to look at. For this reason I will also put the Responsive image in its own component, so that it does not clutter the JSX.

Moving our ResponsiveImage component into a wrapper will also allow us to pass props to it, if needed. We won't do that now, but it's a good idea down the road. For instance, we could pass in an array of images each with a minimum width. This data could be used to generate the ResponsiveImageSize components inside the ResponsiveImage component. But for now, at least we have abstracted the code and moved it outside of the main.js file and segregated it.

Let's take a look at what our cleaned up main.js file looks like now:

const App = () => {
  const checkIfMediumPlus = useMediaPredicate("(min-width: 768px)");
  return (
    <Row gutter={40}>
      <Col xs={{ span: 12 }} sm={{ span: 2 }}>
        <MenuWrapper isMediumPlus={checkIfMediumPlus} />
      </Col>
      <Col xs={{ span: 12 }} sm={{ span: 10 }} >
        <Row gutter={0}>
          <Col xs={{ span: 12 }} sm={{ span: 3 }} md={{ span: 3 }}>
            <KendoImage />
          </Col>
          <Col xs={{ span: 12 }} sm={{ span: 9 }} md={{ span: 9 }}>
            <KendoInfo />
          </Col>
          <Col span={12}>
            <Companies />
          </Col>
        </Row>
      </Col>
    </Row>
  );
}

This is much easier for anyone to walk into and understand what is going on. So long as they have a basic understanding of how other 12 column grids work, or maybe they have worked with Bootstrap or Foundation in the past, this looks familiar.

As for the custom.css file, what I have done is set up a few breakpoints to match the react-simple-flex-grid defaults and I painstakingly went through each breakpoint and wrote some styles for each component. We also increase the text size overall when we bump up to medium and up. It's not perfect, but it's better than what we had before and easy to read and follow as you scan through the document.

.navbar {
  background-color: #fff;
}
.component-responsive-image img {
  padding: 1em;
  width: 100%;
}
.kendo-info {
  padding: 1em;
}
.companyList {
  padding: 1em;
  background-color: #efefef;
}

@media screen and (min-width: 0px) {
  .component-responsive-image img {
    padding: 0;
    width: 100%;
  }
  .companyList h2, .kendo-info h2 {
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .navbar {
    height: 100vh;
    padding-top: 1em;
    background-color: #efefef;
  }
  .component-responsive-image {
    height: 100%;
  }
  .component-responsive-image img {
    padding: 1em;
    max-width: auto;
    height: 100%;
  }
  .companyList {
    background-color: #fff;
  }
  .kendo-info {
    font-size: 1.25em;
  }
}

@media screen and (min-width: 992px) {
  .kendo-info {
    font-size: 1.5em;
  }
}

Finally, I have done some basic arranging of the files into respective directories:

Wrapping Up

That brings us to the end of this part of the series. So far, in our first article, we have gone over how to work with Flexbox manually as well as explored ready to use React Components from the ecosystem to help us achieve responsive behavior without doing all of the work manually. In this article we continued to lean on the ecosystem to find a simple and easy to use grid system so that we could create responsive layout and grids for other purposes like a gallery of images. I hope you feel like you know your way around Responsive React a little better now.

It always pays to know how this stuff works under the hood, however, there is no reason in this day and age to roll your own Flexbox grid - doing so once to get the basic understanding is great, but there are many components out there that can help you do that. It saves a lot of time and grief and it's not hard to change if you move to another solution.

Below is our final StackBlitz demo and the product of this refactoring exercise. If I were in charge of building this application out fully this would be a great place to start and we would have tools that can help us tackle everyday responsive behavior and layout in our application.

As the newest version of the Vue CLI gets released, we'll take a look at the latest features and improvements of this release that undoubtedly improve how you build using Vue. 

Vue.js is a frontend web development framework with a huge ecosystem, and it recently overtook React to be the most popular JavaScript framework. Alongside its simple integration, detailed documentation and flexibility, Vue.js also comes with a CLI for scaffolding Vue.js projects.

The CLI comes fully packed with all the tools and libraries that make modern frontend tooling such a chore. It comes with webpack for for bundling, lazy loading, hot reloading, etc.; Babel for ES2017 transpilation and polyfill injection; and ESLint config to help you write better JavaScript.

With the latest release of the CLI (version 3), there have been several noticeable improvements and exciting features that will undoubtedly improve the Vue.js developer’s experience. We’ll go through some of the new features that you should look out for when making use of the CLI.

Version 3 features a rewrite of the previous version aimed to reduce the complexity of configuring a modern frontend development environment.

The new CLI comes with out-of-the box support for:

• Pre-configured webpack features such as hot module replacement, code-splitting, tree-shaking, efficient long term caching, error overlays, etc.
• ES2017 transpilation (plus common proposals like object rest spread and dynamic import) and usage-based polyfill injection via Babel 7 + preset-env.
• Support for PostCSS (with autoprefixer enabled by default) and all major CSS pre-processors.
• Auto-generated HTML with hashed asset links and preload/prefetch resource hints.
• Modes and cascading environment variables via .env files.
• Modern mode: ship native ES2017+ bundle and legacy bundle in parallel (details below).
• Multi-page mode: build an app with multiple HTML/JS entry points.
• Build targets: build Vue Single-File Components into a library or native web components (details below).

Modern Mode

The new CLI will provide a new flag to build a version of your application that drops support for legacy browsers. Significantly larger file chunks are built when providing support for legacy browsers, and this feature provides a much-needed alternative as you can potentially reduce your application’s build size by 16% by targeting recent browsers that support ES modules.

When building your application, include the --modern flag and the CLI will build two versions of your application, one targeting modern browsers and a separate bundle targeting legacy browsers.

With two separate versions of your application available, you can load the legacy version on older browsers and the modern version on more recent browsers.

To get started using this feature, run the following command to build your application:

    vue-cli-service build --modern

Graphical User Interface

Now this is a feature that will attract a lot of interest — a user interface to manage your Vue.js projects, plugins, dependencies and project configurations. Altering project-wide settings becomes a walk in the park once you can visualize your changes. It is even more impressive once you realize you can alter your build directory, ESLint settings, etc. using toggles and check buttons.

There’s a Plugins page where you can manage (update, add, remove ) your project’s plugins. The Dependencies tab, where you can search for and install project dependencies, displays the monthly download totala for each dependency, which comes in handy when comparing a library’s popularity. A Tasks tab is also included, where you can serve, build, lint and test your project, all within the GUI.

I’m sure you can’t wait to fire this up and check it out. The UI is currently still in alpha, so you may experience a few bugs here and there. Get started with the GUI by running the following command:

    vue ui

Instant Prototyping

Getting started with a framework or library can be quite frustrating because of the setup involved. The process of running an application typically involves installing project dependencies and plugins, transpiling and compiling the project files — which all take several minutes. That is why the new version of the CLI has an instant prototyping feature that can serve your application immediately without the hassle of installing project dependencies.

To get started with this feature, you’ll need to run npm install -g @vue/cli-service-global to install the CLI service globally. Serving your application immediately gets easier: running vue serve on any *.vue file presents an instant view of the file. This file can also be moved into a larger project and it will continue working as intended.

First, run:

npminstall -g @vue/cli-service-global

Then create a *.vue file:

    //Test.vue
    <template><div>Instant prototyping. Yaay!!!</div></template>

Serve the file using the command:

    vue serve Test.vue

Configurable

Even though CLIs solve the configuration complexity issue of most projects by abstracting configuration from the users, they also prevent further configuration of the available setup and most often only offer the solution of “ejection.” After an “ejection,” further configuration falls to the user and certain users get stuck with the complication of extending their application’s setup further.

With the introduction of this CLI version, users will be able to extend their current webpack setup using tools like:

• webpack-merge: for merging additional options into the current config
• webpack-chain: this tool attempts to improve configuration by providing a chainable or fluent API for creating and modifying webpack configurations

You can include configuration files to your project's root folder for third-party libraries like PostCSS, Babel, TypeScript, ESLint, etc. and they will respect the corresponding configuration files for these tools.

The CLI also ships with an inspect command vue inspect to peek at the current webpack setup. Writing plugins or installing third-party plugins will extend the configuration further, giving you more control over your current setup.

Extensible Plugin System

Templates were a popular feature in version 2 of the CLI. Well, support for templates has been dropped. But, rather than templates, you can create presets that are powerful enough to inject dependencies and files during the app’s scaffolding phase and tweak the app’s webpack config or inject additional commands to the CLI service during development.

To create plugins and presets for your projects, a new plugin API has been provided so you can develop plugins to use for your projects and also share with the community. This API will enable you to configure your project’s setup, giving you the power to extend your configuration further.

You want to build your application using TypeScript rather than JavaScript? A plugin can extend your project’s current setup to include configuration for TypeScript. You can include configs for Apollo, Jest, Cypress, etc.

Get started building plugins by visiting the plugin dev guide. You can also search and install community plugins using the GUI provided by the CLI or visit the awesome-vue repository to view a list of third-party plugins.

Building as Web Components

The new CLI version includes a command to generate and wrap any existing *.vue components and register them as native elements. To use the created element, include the element in any page as <the-element></the-element> and include Vue globally on the page.

To create a web component using a *.vue component, run the following command:

    vue-cli-service build --target wc --name the-element src/TheComponent.vue

Alternatively, you can build multiple Vue components into a separate bundle. Registering an entry file registers all the components as native elements and asynchronously loads the underlying components when the element is instantiated.

To build multiple Vue components, use the following command. The command uses a glob pattern to match all *.vue components within the folder:

    vue-cli-service build --target wc-async 'src/components/*.vue'

Multiple Page Mode

With the latest installment of the CLI, you can build your application in the multi-page mode, where you provide separate entry files for each page. When using the multi-page mode, each “page” is required to have a corresponding JavaScript entry file. The value of each page should be an object where the key is the name of the entry, and the value can either be:

• An object that specifies the template, filename, title, chunks and entry. The entry property is the only required property and any other properties added will also be passed directly to html-webpack-plugin, allowing the user to customize said plugin.
• A string specifying its entry.

Here’s an example showing how to build for two pages as shown in the official documentation:

    module.exports ={
      pages:{
        index:{// entry for the page
          entry:'src/index/main.js',// the source template
          template:'public/index.html',// output as dist/index.html
          filename:'index.html',// when using title option,// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
          title:'Index Page',// chunks to include on this page, by default includes// extracted common chunks and vendor chunks.
          chunks:['chunk-vendors','chunk-common','index']},// when using the entry-only string format,// template is inferred to be `public/subpage.html`// and falls back to `public/index.html` if not found.// Output filename is inferred to be `subpage.html`.
        subpage:'src/subpage/main.js'}}

You can read more on how to configure each page by visiting the official documentation.

Build Targets

Also included in the new CLI version is the ability to specify build targets when building your application. With this feature, you can produce separate builds of your application for several use cases.

1. Library

If you’re working on a great library, you can set your build target to library. When using the library build target, the CLI builds your application without including Vue in the build bundle and instead uses the global Vue variable or it attempts to load it as a dependency.

To build your application as a library, use the following command:

    vue-cli-service build --target lib --name myLib [entry]

You’ll need to provide an entry file which can either be a .js or .vue file. Omitting an entry file will default to the src/App.vue file as the entry file.

After building a library, it outputs four separate files:

• A CommonJS bundle for consuming via bundlers (unfortunately, webpack currently does not support ES modules output format for bundles yet) — dist/*.common.js
• A UMD bundle for consuming directly in browsers or with AMD loaders — dist/*.umd.js
• Minified version of the UMD build — dist/*.umd.min.js
• Extracted CSS file (can be forced into inline by setting css: { extract: false } in vue.config.js) — dist/*.css

This is the default build target that ouputs an index.html file, vendor libraries split into separate chunks and static assets placed in the public directory.

Getting started with the new version of the CLI is relatively easy. Run the following command to install the CLI globally on your PC:

npminstall -g @vue/cli
    #           or
    yarn global add @vue/cli

Also, visit the official documentation to get an overview of the latest features that are packaged with the version.

For More info on Vue:

Want to learn about creating great user interfaces with Vue? Check out Kendo UI for Vue, our complete UI component library that allows you to quickly build high-quality, responsive apps. It includes all the components you’ll need, from grids and charts to schedulers and dials.

When someone says "data" our minds don't automatically jump to "user experience" - but maybe they should. In the fourth installment of the SOLID UX Princples series by Jessica Engstrom, she shares key UX considerations as they pertain to data loss and data sharing.

If you missed my previous posts, you can catch up right here: Part 1: Make Software Understandable, Part 2: Ergonomics & Beauty and Part 3: Responsiveness & Efficiency. Otherwise, let's dive into the next part below.

In addition to which components, icons and design we choose when we think about UX, we also need to think about the data itself.

Losing Data

The UI is protective when the user doesn’t lose data or work unintentionally. Having to click save to commit your changes is most likely redundant as this is something we had to do back when computers didn’t have much memory and storage didn’t come as cheap as it does today. Always save the users data when possible so you can retrieve it again if something happens.

We also need to take into consideration that our users are human, and humans sometimes makes mistakes. That is why it’s important to make sure that the user can undo a mistake they did.

Saving data automatically also means we should implement versioning. What if the user accidentally deletes everything in the document? They need to be able to get the information back.

Adding auto-save is an important feature, but it also means we should consider implementing versioning.

Oversharing Data

When the user can go about their business in a social context with no social disruption or embarrassment to themselves or others, the UI is discreet. Discreet is always nice.
We wouldn’t want the ATM to read your PIN out loud. Or think of all the games that flood Facebook, or even the autoplay of videos on Instagram when you forgot to turn the sound off. All of this is unwanted disclosure.

So, we need to take a moment to think about what we share, where in the solution we share it and also how much of it. We can access all the data if that is needed, but perhaps it’s better to have all that data in one place instead of right front and center.

This can also be important when it comes to GDPR (The European Union's General Data Protection Regulation), if a co-worker watches over your shoulder and you have customer information on you screen that the other person does not have authorization to look at, you need to report this as an incident.

Having less customer sensitive data on the screen will limit the risk of unauthorized people reading sensitive data.

You might hide sensitive data so it is only visible while you have the mouse cursor over the area or have a button that briefly toggles the visibility. Password saving applications do the same, for instance.

Thinking about how you disclose data in your software and how to properly store it is more important than ever.

Stay tuned for the next post in this series, or for more, feel free to check out the webinar we recently hosted on the topic right here.

Telerik UI for Blazor 0.2.0 is available for download today. This release makes Telerik UI for Blazor compatible with Visual Studio 2019 preview 2, and ASP.NET Core 3.0 preview 2. 

A few weeks ago we released an early preview of Telerik UI for Blazor. The early preview is intended to give developers a peek into the development process while giving everyone a chance to share their feedback on the product. We are working closely to align our goals with those of Microsoft's ASP.NET Core team, which is why we're happy to announce Telerik UI for Blazor 0.2.0. This new version aligns our UI components with the ASP.NET Core 3.0 preview 2 and Blazor 0.8.0 release.

What's New

In this release you may not see a lot of changes on the surface, but we've diligently kept up with things that are happening beneath the surface of the framework. ASP.NET Core 3.0 preview-2 marks a milestone for Razor Components, the underlying component model for Blazor. In preview 2, Razor Components has been decoupled from Blazor, making the component model much more flexible (for more about this see the preview 2 announcements). The change shifted some dependencies and name spaces used to power Telerik UI for Blazor, prompting us add compatibility with the new release.

Telerik UI for Blazor is now compatible with:

• Visual Studio 2019 Preview 2
• ASP.NET Core 3.0 Preview 2
• and Blazor 0.8.0

Going forward Telerik UI for Blazor 0.1.0 is only compatible with Visual Studio 2017. You will need to migrate your experiments along with your tooling to Visual Studio 2019 to utilize 0.2.0.

Besides supporting the new latest bits some small changes were made to the Grid component:

• Grid columns are now better defined. In this version Grid columns have improved semantics through nesting. The KendoGridColumns container clearly defines where columns begin in the Grid and gives us a framework to build upon. In the example below the columns are clearly defined and have different nesting from the RowTemplate.

<KendoGrid Data=@GridData>
    <RowTemplate ... />
    <KendoGridColumns>
        <KendoGridColumn Field=@nameof(Product.ProductName)/>
        <KendoGridColumn Field=@nameof(Product.UnitPrice)/>
    </KendoGridColumns>
</KendoGrid>

• Grid Height is now a supported parameter, which allows the grid height to be defined programmatically.

<KendoGrid Data=@GridData Height=@Height>

• Code samples are here! We really wanted to help you hit the ground running. With the ecosystem changing rapidly, it's best to show solid examples of how to get things done. This is why we have released a new GitHub repository showing of our components doing cool things like: Templates, Editing, and swapping themes. You can clone the samples here: https://github.com/telerik/ui-for-blazor-examples

Stay Tuned

We're committed to Telerik UI for Blazor and plan to release more content in the form of video, blogs, and samples on GitHub. If you're watching with anticipation for what's coming next, make sure to visit our blogs frequently for news and announcements. For more insight into all things Blazor, you can watch me (Ed Charbeneau, Progress developer advocate), each week Friday at 12pm EST on Twitch.

Join the Early Preview

We're excited to be part of the next generation of ASP.NET applications by supporting Blazor. Telerik UI for Blazor Early Preview is available for free today. The package currently includes Data Grid, Tab Set, and Button components written from the gound up to take advantage of Blazor without legacy JavaScript dependencies (there's no jQuery this time folks). Throughout the year Microsoft will be working on Blazor (aka Razor Components) as part of ASP.NET Core 3.0. We plan on keeping Telerik UI for Blazor up to date as the project progresses and look forward to hearing your feedback, see what you've built, and know what components you need for your next app.

A Special Installation Note

For the Telerik UI for Blazor version 0.2.0 to show in your NuGet feed, you must visit the download page and create an account, or sign in. You will need to repeat this process even if you already have early preview 0.1.0. Visiting this page will activate your NuGet feed. For more information about adding the Telerik NuGet feed please see our documentation.

In this step-by-step guide, learn how you can create a Trello-like project management app quickly and easily using Kendo UI.

This is the first post in a two-part series where you will learn how to build the frontend for a Trello-like app. Our app will have a board with lists and the lists will contain cards. The cards can be dragged and dropped within their list or between lists. And users can create new cards as well as edit the content of existing cards. This kind of app can be customized for many different uses cases like a project management tool for software developers or an issue tracker. Our app will be a todo list built using the Kendo UI ListView and Sortable components. Your first task will be to create a board initialized with three lists and a few cards.

Creating the Lists

Our board is essentially a list view within another list view. The first list view we will create are the containers for the cards. We will create an element with the id board in the body of our HTML to inject our lists. Inside the component’s parameters, we will specify the data source and the template to initialize the widget. Our dataSource will be an array of objects that have a listID and name attribute. This example creates three lists:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>Kanban Board</title><linkrel="stylesheet"href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css"><scriptsrc="https://code.jquery.com/jquery-1.12.3.min.js"></script><scriptsrc="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script></head><body><divclass="board"></div><script>$('.board').kendoListView({
    template: kendo.template($('#listTemplate').html()),
    dataSource:[{listID:0, name:'To Do'},{listID:1, name:'Doing'},{listID:2, name:'Done'}]});</script></body></html>

The list template will have a header that displays the value of the name attribute. Beneath the header will be a container to hold the list of cards. This container will have an id that uses the value of the listID attribute. For our example, if the listID is 1 the element’s id will become list-1. We need to give this element an id so we can reference it when creating the list view for the cards later on. The following is an example of the board’s list template created using a script block. It should be placed before the script where your component is initialized.

<scriptid="listTemplate"type="text/x-kendo-template"><div class="list-wrapper"><div class="list-header"><span class="list-title">#: name #</span></div><div id="list-#: listID #"class="list"></div></div></script>

And this is the associated CSS to style the lists:

<style>body {font-family: helvetica;color:#444;}.board{overflow-x: scroll;white-space: nowrap;position: absolute;top:0;right:0;bottom:0;left:0;background:#cd5a91;}.list-wrapper{width:16em;background-color:#eee;margin:.5em;border-radius:3px;box-sizing: border-box;display: inline-block;vertical-align: top;}.list{background-color:#eee;border: none;padding:.5em;margin-bottom:2em;box-sizing: border-box;}.list-header{height:3em;line-height:3em;padding:01em;}.list-title{font-weight: bold;}</style>

Creating the Cards

Next, we will create a ListView for the cards. A card will have a cardID and a name. The name is the content that will be displayed inside the card. The first step is defining the template. Again, we will use a script block that’s placed in the body of the HTML.

<scriptid="cardTemplate"type="text/x-kendo-template"><div class="card">#: name #</div></script>

And this is the additional styles:

.card{box-sizing: border-box;position: relative;width:100%;min-height:4em;padding:1em;border-radius:3px;margin-bottom:.5em;background:#fff;}

For each list in the board, we will create a list view for the cards. We could create a function to loop through the data and create the components. This would be ideal if we had a variable number of lists. For instance, if we allowed users to create lists as well, then we would not be able to hard code each component. We would need to dynamically create the lists and find which cards belong to each list to insert them into the list view. However, since we are working with a fixed number of lists, I will define each component manually.

$('#list-0').kendoListView({
  template: kendo.template($('#cardTemplate').html()),
  dataSource:[{ cardID:0, name:'Create UI'}]});$('#list-1').kendoListView({
  template: kendo.template($('#cardTemplate').html()),
  dataSource:[{ cardID:1, name:'Implement button behavior'},{ cardID:2, name:'Refactor code'}]});$('#list-2').kendoListView({
  template: kendo.template($('#cardTemplate').html())});

This is now what our board looks like:

Making the Cards Sortable

To make our cards draggable and droppable between lists we will use the Sortable component. Each of these list views will behave the same so we can give them all the same options. First, we will create a variable named sortableOptions that we will pass to the component’s arguments.

var sortableOptions ={
  filter:'.card',
  container:'.board',
  connectWith:'.list',
  cursor:'grabbing',
  placeholder:function(element){return$('<div class="card"></div>').css({
      background:'#ddd'});},
  hint:function(element){return element.clone().css({
      width:'15em',
      transform:'rotate(-5deg)',
      border:'1px solid #eee'});}};

The filter option is needed to define which items are sortable. The connectWith option lets us move the cards between the lists. Our placeholder is an empty card element that is slightly darker than the background to give the appearance of a shadow where the card was moved. And the hint is a copy of the card element given a slight tilt. The final part is to initialize each card list view as a Sortable component.

$('#list-0').kendoSortable(sortableOptions);$('#list-1').kendoSortable(sortableOptions);$('#list-2').kendoSortable(sortableOptions);

This is what the board looks like while dragging a card:

Summary

So far we have created a list view for the lists on the board and the cards in the lists. We also made the cards sortable so we could move them around the lists. We could have also made the lists sortable using much of the same code from the card sortable options. The main fields you would need to change is the filter option so that it uses the container for the lists and the hint can be a clone of the element.

Stay tuned for the next article, where we will implement the behavior to add, edit, and remove cards.

Try out Kendo UI for Yourself

Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the ones here? You can begin a free trial of Kendo UI today and start developing your apps faster.

Start My Kendo UI Trial

Angular, React, and Vue Versions

Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, KendoReact, or Kendo UI for Vue.

Resources

• API Reference
• Demos
• Kendo UI Web Font Icons
• More Kendo UI components
• Getting Started with Kendo UI Stylesheets
• Kendo UI Online Editor

The first Test Studio release for the year features UI/UX redesigns for increased user efficiency, a lot of Scheduling improvements, including automatic self-recovery of the execution agent and many more fixes and small features.

We are starting the year with improvements that not only smarten your daily test automation activities up, but also lay down the foundations for the exciting features coming up in the upcoming 2019 releases. The first major improvement is the re-design of the Find Expression Builder (Edit Element). It is now easier to use it and is ready to host the images that will be part of the image-based element identification expected to come later in the year. Here is an overview of the changes:

Redesigned Find Expression Builder (Edit Element)

We’ve moved it from that old-school dialog to the test area. This means that you can open as many elements as needed, put them side to side to compare or even place them side by side with a test.

The goal of this redesign is to improve usability and make the user’s interaction as simple and efficient as possible. Through removing old and unused parts and exposing the most valued features in the UI we aim to achieve a better user experience.

Scheduling Services Improvements and Self-Recovery Mechanism

Scheduling is now even more stable and easy to setup. Here are the main changes:

• Execution agent unattended automatic self-recovery: If for any reason the execution agent stops working, it will restart and recover itself and continue executing tests and test lists.
• Easy and simplified network configuration: Instead of using unlimited port ranges as it used to, all Scheduling bits will now use only three ports – 8009 for the Scheduling service, 55555 for the execution agent, 8492 for the storage service.
• Improved scheduling runs parallelization
• General stability/reliability improvements and fixes

Ribbon Menu Improvements

New Project, Test and Element Ribbon menus have been added for improved in-product navigation and usability. The Element Find Expression Builder options and actions are now moved in their ribbon menu on top of Test Studio's window and are easy to access when working with an element.

So Much More

In addition to all above there are a lot more fixes, optimizations and small customer-requested features like support for breakpoints for nested test as steps, global Save All shortcut (Ctrl+Shift+S), KillBrowsersBeforeStart setting for all execution types in Test Studio, Step Builder options to manually add Connect to Pop-Up and Close Pop-Up Window steps, etc. You can see the full change log here.

We would love to hear your opinion, so don't hesitate to let us know what you think. Happy testing!

Try Test Studio

In part two of this guide, learn how to edit a Grid you've created with the new native Grid in Kendo UI for Vue.

In the last post, we saw how to initialize a Vue Native Grid with Kendo UI, using local and remote data. In this post, we will learn how to implement some of the editing features of the Vue Native Grid. Using the grid wrapper, you can enable editing by configuring the editable and toolbar properties and the component takes care of everything. But in this case we are limited to the default behavior. Using the native grid, we must implement the functionality ourselves to enable editing. This gives us more control over the behavior of the component and allows us to handle all possible interactions on the page. Up next, we will see how to add the ability to edit records inline and create new records.

Getting Started

First, we will initialize our project using the Vue webpack-simple template. Inside the project directory, we will install a theme, the grid, the globalization package, and the vue-class-component using the following commands:

npminstall --save @progress/kendo-theme-default
npminstall --save @progress/kendo-vue-grid
npminstall --save @progress/kendo-vue-intl 
npminstall --save vue-class-component

Next, we import the theme, the Grid and the GridToolbar in our main.js file. We need the GridToolbar component for the add new record functionality. Last, we register the Grid and GridToolbar globally. The following is the updated main.js file.

import Vue from 'vue'
import App from './App.vue'
import '@progress/kendo-theme-default/dist/all.css'
import { Grid, GridToolbar } from '@progress/kendo-vue-grid'

Vue.component('Grid', Grid)
Vue.component('grid-toolbar', GridToolbar)

new Vue({
  el: '#app',
  render: h => h(App)
})

In the App.vue file we will first add the Grid component to the template. In the component, we will set thedata-items,columns, andedit-fieldproperties and add therowclickanditemchange events. This is the template:

<template><divid="app"><Grid:style="{height:'240px'}":data-items="getData":columns="columns":edit-field="'inEdit'"@rowclick="rowClick"@itemchange="itemChange"></Grid></div></template>

We need the data-items and columns properties to construct the grid. The edit-field is used to determine if the current record is in edit mode. It is the name of a field in our data items and the value is either true or false. We chose the name inEdit, but our data items don’t have a field named inEdit so we will have to give it one. We will create a computed method called getData that assigns the property inEdit to all of the data items. The value of inEdit is true depending on if the editID equals the personId. The editID is the id of the item that is in edit mode. This is the script so far:

<script>import Vue from'vue';var people =[{"personId":0,"name":"Ruxanda","surname":"Corbea","gender":"female","region":"Romania"},{"personId":1,"name":"Paula","surname":"Acevedo","gender":"female","region":"Mexico"},{"personId":2,"name":"David","surname":"Dediu","gender":"male","region":"Romania"},{"personId":3,"name":"Urmila","surname":"Belbase","gender":"female","region":"Nepal"}];exportdefault{
  name:'app',data(){return{
      gridData: people,
      editID:null,
      columns:[{ field:'personId', title:'ID'},{ field:'name'},{ field:'surname'},{ field:'gender'},{ field:'region'}],};},
  computed:{getData(){returnthis.gridData.map((item)=> Object.assign({inEdit: item.personId ===this.editID}, item))}}}</script>

Editing Records

To enable editing, we need to handle the rowclick and itemchange events. The rowclick event fires when a user clicks a row. When this event is triggered, we want to put the record in edit mode. In our handler, we will set the editID equal to the personId so that inEdit becomes true. The itemchange event fires when the user changes the value of an item. We will use this event to save our changes. In the handler, first, we copy the data items. Then we find the index of the item being edited. We replace the item at that index with the new values. Last, we set our local data source equal to the new data. This is the rowclick and itemchange handlers:

export default {
  ...
  methods: {
    rowClick (e) {
      this.editID = e.dataItem.personId;
    },
    itemChange (e) {
      const data = this.gridData.slice();
      const index = data.findIndex(d => d.personId === e.dataItem.personId);
      data[index] = { ...data[index], [e.field]: e.value };
      this.gridData = data;
    }
  }
}

Adding Records

Next, we will go over how to add new records. We will add a button to the toolbar. When clicked, a new row will be added to the beginning of the grid in edit mode. When the toolbar is clicked, the record will be taken out of edit mode. First, we will add the grid-toolbar template to our existing template. This is the updated Grid component:

<Grid:style="{height:'240px'}":data-items="getData":columns="columns":edit-field="'inEdit'"@rowclick="rowClick"@itemchange="itemChange"><grid-toolbar><div@click="closeEdit"><buttontitle="Add new"class="k-button k-primary"@click='addRecord'>
        Add new
      </button></div></grid-toolbar></Grid>

Next, we will implement the addRecord and closeEdit click events and add them to our list of methods. For the addRecord method, we will first create a new record and initialize it with a personId field. Then we will copy the current data. Next, we add the new record to the beginning of copied data. Then we set our local data source equal to the updated data. Last, we put the record in edit mode by setting the editID equal to the personId. For the closeEdit method we make the editID equal to null so the record is no longer in edit mode. These are the two methods added to our script.

export default {
  ...
  methods: {
    ...
    addRecord () {
      const newRecord = {personId: this.gridData.length}
      const data = this.gridData.slice();
      data.unshift(newRecord);
      this.gridData = data;
      this.editID = newRecord.personId;
    },
    closeEdit (e) {
      if (e.target === e.currentTarget) {
        this.editID = null;
      }
    }
  }
}

See the final project repo here: https://github.com/albertaw/kendoui-vue-native-grid-editing

Summary

We saw how to edit data items and create new data items in the grid. There are many other ways we could have customized our grid. Items can be edited inline or in cell. In addition to adding and editing records, we could add the ability to delete records. Instead of clicking the toolbar to close editing, we could add buttons to save and cancel changes. We could also create an edit button to activate the edit mode. You can also use templates to create custom edit fields. These are just some of the features you can add.

Resources

• Project Repo
• Vue Grid Native Overview
• Vue Grid Native Editing Basics
• Vue Grid Native API

Try out Kendo UI for Yourself

Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.

Start My Kendo UI Trial

Angular, React, and jQuery Versions

Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for jQuery.

More Resources

• Kendo UI Vue Docs and Demos
• Vue.js Webpack-Simple Template
• Kendo UI Online Editor

In part two of this step-by-step guide, learn how to enhance your Trello-like project management app with interactivity using Kendo UI.

In the first part of this series, we used the ListView and Sortable components of Kendo UI to easily make a Trello-like todo list. In this part, you will make your lists more interactive by adding features to add cards, remove cards, and edit cards in each list.

When the add button is clicked, a card will appear in edit mode at the top of the list. The changes will be saved by clicking an update button which will replace the card with a normal card. When a user hovers over a card, an edit and remove button will appear. When the edit button is clicked, a card will appear in edit mode at the top of the list. When the remove button is clicked, the card will be deleted from the list.

Getting Started

To implement these features we will complete the following steps:

1. Include a button in the header of the list template
2. Create an edit template and add it to the options for each list
3. Define a click handler for the add button
4. Add buttons to the card template for editing and removing

Before we begin, this is the code we will be modifying:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>Kanban Board</title><linkrel="stylesheet"href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css"><scriptsrc="https://code.jquery.com/jquery-1.12.3.min.js"></script><scriptsrc="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script><style>body {font-family: helvetica;color:#444;}.board{overflow-x: scroll;white-space: nowrap;position: absolute;top:0;right:0;bottom:0;left:0;background:#cd5a91;}.list-wrapper{width:16em;background-color:#eee;margin:.5em;border-radius:3px;box-sizing: border-box;display: inline-block;vertical-align: top;}.list{background-color:#eee;border: none;padding:.5em;margin-bottom:2em;box-sizing: border-box;}.list-header{height:3em;line-height:3em;padding:01em;}.list-title{font-weight: bold;}.card{box-sizing: border-box;position: relative;width:100%;min-height:4em;padding:1em;border-radius:3px;margin-bottom:.5em;background:#fff;}</style></head><body><divclass="board"></div><!-- LIST TEMPLATE --><scriptid="listTemplate"type="text/x-kendo-template"><div class="list-wrapper"><div class="list-header"><span class="list-title">#: name #</span></div><div id="list-#: listID #"class="list"></div></div></script><!-- CARD TEMPLATE --><scriptid="cardTemplate"type="text/x-kendo-template"><div class="card">#: name #</div></script><!-- INITIALIZATION --><script>$('.board').kendoListView({
        template: kendo.template($('#listTemplate').html()),
        dataSource:[{listID:0, name:'To Do'},{listID:1, name:'Doing'},{listID:2, name:'Done'}]});$('#list-0').kendoListView({
        template: kendo.template($('#cardTemplate').html()),
        dataSource:[{ cardID:0, name:'Create UI'}]});$('#list-1').kendoListView({
        template: kendo.template($('#cardTemplate').html()),
        dataSource:[{ cardID:1, name:'Implement button behavior'},{ cardID:2, name:'Refactor code'}]});$('#list-2').kendoListView({
        template: kendo.template($('#cardTemplate').html())});var sortableOptions ={
        filter:'.card',
        container:'.board',
        connectWith:'.list',
        cursor:'grabbing',
        placeholder:function(element){return$('<div class="card"></div>').css({
            background:'#ddd'});},
        hint:function(element){return element.clone().css({
            width:'15em',
            transform:'rotate(-5deg)',
            border:'1px solid #eee'});}};$('#list-0').kendoSortable(sortableOptions);$('#list-1').kendoSortable(sortableOptions);$('#list-2').kendoSortable(sortableOptions);</script></body></html>

Updating the Templates

First, we will add the markup for the add button to the lists. Inside the script block for the list template, add the following code within the list-header element:

<divclass="pull-right"><spanclass="k-add-button k-icon k-i-add"></span></div>

Add this CSS to your styles:

.pull-right{float: right;}

Next, we will define an edit template for the card. We will create another script block and add it to our HTML. Inside the script block, we will add a textarea element so users can enter the name of the card and an update button to save the changes. Inside the textarea we will add the attribute data-bind="value:name" to link the name field of the data item to the value of the textarea. You do not need to create a click handler for the save button to work. By adding the class k-update-button to the button’s attributes, the component will take care of that functionality for us. This is what our new template looks like:

<scriptid="cardEditTemplate"type="text/x-kendo-template"><div><textarea class="card-edit" name="name" data-bind="value:name" required="required"></textarea><div class="card-edit-controls"><button class="k-update-button k-button"><span class="k-icon k-i-check"></span> Save
      </button></div></div></script>

This is the additional CSS:

.card-edit{display: block;box-sizing: border-box;position: relative;width:100%;min-height:4em;padding:1em;border-radius:3px;margin-bottom:.5em;background:#fff;font-size:1em;border: none;}.card-edit-controls{margin-bottom:.5em;}

For the #list-0, #list-1, and list-2 list views, add the following coded inside the component’s options:

editTemplate: kendo.template($('#cardEditTemplate').html())

Activating the Add Button

The next step is to create an event handler to show the edit template when the add button is clicked. This is what the handler will do:

1. Identify the list the clicked button belongs to
2. Get the id of the list
3. Use the list’s id to get a reference to the ListView widget
4. Call the add method on the widget

The add method will insert an item in edit mode at the beginning of the list view. Inside the initialization script block, add this:

$('.k-add-button').click(function(e){var list =$(e.target).closest('.list-wrapper').find('.list');var listID ='#'+$(list).prop('id');var listView =$(listID).data('kendoListView');
  listView.add();});

Edit and Remove Card Features

The final step is to add the edit and remove buttons to our card template. The edit and remove features are simple to implement as they do not require us to create click handlers. We just need to add the class k-edit-button and k-delete-button to the button element. This is our updated card template:

<scriptid="cardTemplate"type="text/x-kendo-template"><div class="card">
    #= name #
    <div class="card-controls"><span class="k-edit-button k-icon k-i-edit"></span><span class="k-delete-button k-icon k-i-close"></span></div></div></script>

This is the CSS to style the buttons:

.card-controls{position: absolute;right:.5em;top:.5em;display: none;}.card:hover.card-controls{display: inline-block;}

Summary

In this tutorial, you saw how to create buttons to add, edit and remove cards. We needed to specify an edit template to add and edit cards. We created a click handler to add a new card, but not to edit or remove a card. It is also possible to add a cancel button to discard changes while in edit mode. You would just need to add a button with the class k-cancel-button to the card’s edit template. Additionally, all of the features we added to manipulate cards could be used to manipulate the lists. You can add the functionality to add, edit, and remove lists by reusing much of the code we have here.

Try out Kendo UI for Yourself

Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.

Start My Kendo UI Trial

Angular, React, and Vue Versions

Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for Vue.

Resources

• API Reference
• Demos
• Kendo UI Web Font Icons
• More Kendo UI components
• Getting Started with Kendo UI Stylesheets
• Kendo UI Online Editor

In R1 2019 we introduced support in Telerik Reporting for .NET Core applications running on Windows, Linux and macOS. Give it a try and leave your feedback!

In the last couple of years .NET Core has grown from a modularized fork of .NET Framework to a fully functional platform that allows you to build and run the same applications on Windows, Linux, and macOS. With each release .NET Core delivers new APIs and adds many optimizations, ultimately positioning itself as a framework-of-choice for more and more .NET Developers. So it's not surprising that the most demanded feature in the Feedback Portal for Telerik Reporting was to provide support for .NET Core applications.

Being naturally curious, we on the Reporting team have long been keeping an eye on the .NET Core evolution, and we recently decided that the framework was mature enough to fit most of our needs. And, lo and behold, in R1 2019 we introduced .NET Core support for the Telerik Reporting runtime. 

Built up to the Standards 

Telerik Reporting assemblies can be referenced via NuGet packages from our Telerik NuGet private feed or through assembly references to local .dll files. If you check the installation directory of our product you will notice that the last release brought a new addition – a netstandard2.0 subfolder. It contains the assemblies you would reference when building a .NET Core application, but the assemblies themselves target .NET Standard 2.0. .NET Standard is a set of fundamental APIs that are available in all .NET implementations. Designed as a formal specification, it determines a base set of functionalities for the .NET ecosystem.

Essentially, the main advantage of targeting .NET Standard is that our assemblies will work in all .NET applications on all supported operating systems.

image obtained from blogs.msdn.microsoft.com

A nice feature of the unification of cross-platform development is that the .NET Standard assemblies can be referenced even in your current .NET Framework application. But why would I? – you may ask. Well, it is not mandatory, since we already provide Telerik Reporting assemblies targeting the full .NET Framework. But this approach may have at least two major advantages: it delivers the optimization benefits in .NET Standard and helps to ease the eventual migration process of your application to .NET Core.

• All rendering extensions except MHTML and XPS are supported on Windows.
• HTML, PDF and OpenXML-based renderings are supported on Linux/macOS.
• All report items except the obsolete Chart item are supported.
• The supported report definition types are TRDX, TRDP and report classes, created in Visual studio without the VS designer-specific code.
• New JSON-based reporting configuration is introduced for both CLI and web applications. For CLI projects the JSON configuration has precedence over the current XML-based reporting configuration. Check here for more details.

What’s not Included?

To design reports for a .NET Core project we recommend using the Standalone Report Designer. Its report definitions are stored in a portable .trdx/.trdp format and can be utilized with UriReportSource where needed.

The Visual Studio Report Designer is available only for class libraries that target the full .NET framework. We cannot provide design-time support for reports in .NET Core or .NET Standard libraries, because we are limited by the current state of the framework and the Visual Studio toolset. For example, the ComponentDesigner class, which is used as a base class for our components, is not yet available in .NET Core. As for migrating the existing report libraries, this KB article will help you pick the right strategy.

How do I Run it on Linux?

When deploying to a Linux machine, make sure it has installed the libgdiplus library, which is a Mono implementation of GDI+ API for non-Windows operating systems. The following snippet performs an update and installs the necessary libraries on Ubuntu/Debian:

sudo apt-get update

sudo apt-get install libc6-dev

sudo apt-get install libgdiplus

And How do I Run it on macOS? 

brew install mono-libgdiplus

Wow. What about Containers? 

FROM microsoft/dotnet:2.1-runtime AS base 

RUN apt-get update \ 
    && apt-get install -y --allow-unauthenticated \ 
        libc6-dev \ 
        libgdiplus \ 
        libx11-dev \ 
    && rm -rf /var/lib/apt/lists/*

Having these three libraries installed ensures that Telerik Reporting will run on the produced Docker image.

Amazing, but how do I Start? 

Telerik Reporting ships with a ready-made ASP.NET Core example that demonstrates how to show our sample reports in an ASP.NET Core application. The example also shows how to inject an appsettings.json configuration file to the controller and how to initialize a WebHostBuilder so it runs under Windows, Linux, and macOS. The project can be found in the %programfiles(x86)%\Progress\Telerik Reporting R1 2019\Examples\CSharp\Asp.NetCoreDemo directory.

Conclusion 

Building Telerik Reporting for .NET Core was a huge feat for our team. It will allow us to reach to a broader audience of developers that want to build modern cross-platform applications. Adding support for the most rapidly evolving development platform is another step towards delivering a top-quality product to our users.

Try it Out and Share Your Feedback

If you are new to our tools or have only tried some, make sure you download the trial and take them for a spin. You can either download just the Reporting and Report Server tools, or download a trial of our entire set of .NET and JavaScript tools with the DevCraft bundle.

We're eager to hear what you think, so please don't forget to share your feedback as well and help us make Telerik Reporting even better.

Let's learn what it takes to create a custom React Hook as well all of the rules we must keep in mind about using Hooks.

Hooks are just functions! Anything that is a function can become a hook. The React team has put lots of information out on how to work with basic and advanced hooks, and they also have good information on how to create custom Hooks yourself. I have been covering the topic for several months and I want to bring everything I know about them together to focus on one topic now. Creating your own custom hook that you can easily share with others and can serve as a template or inspiration for any other custom Hooks you decide to create. I feel that the documentation on the ReactJS site is exhaustive on the subject, but my concern is the lack of a very simple example that I believe will really make the idea click for you.

I take a round about way of getting to this example in this blog post. This is because I want you to be prepared for creating custom hooks. Although they are very similar to creating a basic function, there is more information that you need to know before starting to create custom Hooks yourself. If you have not read up on hooks, I have provided some required reading as well a few articles I have written on the subject. It may be easier to breeze through these articles before we get into custom hooks. I recommend understanding the React Hooks API first, then figuring out how you can create your own hooks, which I cover very simply at the end of this article.

ReactJS.org Documentation

My Basic Hook Articles

Let's Revisit The Basic Hook

If you feel that you have sufficient knowledge of basic Hooks, you can skip directly to creating custom Hooks.

Without going through all of the basic Hooks again, I think we just need to revisit one of them: the useEffect Hook. I learned while reading up on Hooks on the ReactJS.org docs that there are two ways of using useEffect. You can use it without cleanup or with cleanup. These are terms I expect anyone at this stage of working with hooks to either know or to take a few minutes to understand with the links I just provided.

With classes and before Hooks were available, side effects were placed in one of many lifecycle methods like: componentDidMount or componentDidUpdate. In cases where we have duplicated code in both of those methods (performing the same effect for mounting and updating) we can now do these things inside a functional component and we can do it with just one Hook. That's right, I'm talking about useEffect.

useEffect tells React that our component needs to do something after the component renders. It runs after the first render and after every update. In my previous articles I only talk about side effects without cleanup, so we need to start our learning today understanding how to allow a functional component to have a side effect with cleanup. I think that in order to understand how to create our own Hook, we need to completely understand useEffect because not only is it a canonical example of a Hook, but we will use it within our custom Hook later.

Like I said, some effects do not need cleanup, they are simple, such as the ones we have already learned, like updating the document title.

useEffect(() => {
  document.title = `You clicked ${count} times`;
});

If you do need cleanup to run, you can return a function from useEffect. This is optional, but allows you to run some code after your effect and before any new effect runs. A situation where you subscribe to something may need an unsubscribe as part of the effects cleanup process. React will perform this cleanup on unmount.

useEffect(() => {
  console.log("Subscribe to Something);
  return function cleanup() {
    console.log("Unsubscribe to Something);
  };
});

The effect above will run on every render more than one time. React cleans up effects from the previous render before running the effects of the next render, this should be noted. For an explanation on why Hooks run on each update, check out the ReactJS Docs. Remember though, this behavior can be opted out of if it causes performance issues.

We can also optimize performance by skipping effects with an optional argument. For instance, maybe we don't want to run the subscribe/unsubscribe effect unless some id has changed. Check out the example below to understand how this can be done, it's fairly simple!

useEffect(() => {
  console.log("Subscribe to Something);
  return () => {
    console.log("Unsubscribe to Something);
  };
}, [props.something.id]); // only if something.id changes

I would also like to mention that if you have unrelated logic inside your useEffect, you should try refactoring the unrelated code into its own useEffect. You can have as many useEffect calls as you would like. For instance, both of the useEffect calls above could be inside the same functional component. This is allowed.

Hooks allow splitting up code based on what it is doing rather than what lifecycle method it's in. When we only had classes and lifecycle methods, this created a mixing of concerns. Now, using multiple useEffect methods, React can apply each effect in the order they are specified. This is a huge benefit for organizing code in your application.

The Obvious Benefits of Using Hooks

Hooks have a lot of benefit to us as developers, and they are going to change the way we write components for the better. They already help us to write clearer and more concise code - it's like we went on a code diet and we lost a lot of weight and we look better and feel better. It brings out our jaw line and makes us feel lighter on our toes. It's the one change that actually works for us. Just look at what React Hooks have done for others!

All kidding aside, Hooks really does trim the fat. It cuts down and makes our code more readable, concise and clear. To demonstrate let's check out a class version of our canonical "document title effect" and see the difference between how we used to write something like this side by side with an example using an npm installed Hook that does the same thing.

The side-by-side below shows how the component has lost a little weight. We not only save about five lines of code in this simple example, but the readability and test-ability also improve with most Hooks transformations. Also, we would probably have many situations in our code where we have the opportunity to make changes like this, so it could impact a single code base significantly. We get a lot of positive benefits with this change. The code below can be viewed in a StackBlitz demo: Before and After

I want to talk about one more thing before we create our own custom Hook. I want to go over five rules for using Hooks. These are passed down to us from the React team, so they are very important to know and will help keep you from creating buggy code. It will help us realize what code needs to go into a Hook and what code doesn't.

Five Important Rules for Hooks

Before we create our own Hook, let's review a few of the major rules we must always follow.

1. Never call Hooks from inside a loop, condition or nested function
2. Hooks should sit at the top level of your component
3. Only call Hooks from React functional components
4. Never call a Hook from a regular function
5. Hooks can call other Hooks

If you would like, you can enforce these rules in your team with an ES Lint plugin. Also on that same page there are good explanations on why these rules are required. Feel free to read up on that, it's about a five minute read.

Create a Custom Hook of Your Own

I really liked something that was tweeted out recently by Adam Rackis: "Hooks unleash a level of composition well above and beyond anything we've seen." What I would have you understand about Hooks is that all of the great changes that we have seen with Classes and how we have so many options for composition, well that's all available in Hooks now. This means that now our hands are not tied when it comes to the composition of functional components in React. And this is a huge advancement for React developers.

Custom Hooks are JavaScript functions whose name starts with use and that may call other Hooks. So a custom Hook is merely a normal function. By adding the word use to the beginning, it lets us know that this special function follows the rules of Hooks we stated in the section above.

I went through all of this information above because I really wanted you to be setup to understand when, where, and how to use Hooks. Now we will do one final thing in this article. We will take what I know to be the simplest piece of logic that we already know about and create the simplest custom Hook I can think of.

If you remember, we had the example of how to update the document title using the useEffect Hook. Well, this seems like something we may want to do on several pages or inside several different functional components in our app. When some type of information changes we want to update the document title with some type of string. Additionally, we don't want to repeat this logic inside every functional component. We will start by extracting this code into a Hook locally on the same page, and then see how the same hook can be imported into many components and co-located. Pretty simple right?

So we know that a Hook can call a Hook. And if that is true then our custom Hook can also call one of the React Core Basic Hooks, like useEffect. Do you see where I am going with this? Let's review a functional component that updates the document title one more time. The code below can also be seen in this StackBlitz example.

import React, { Component, useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  useEffect(() => {
    document.title = `You clicked ${count} times`
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  )
}

export default Counter;

So what we would like to do here is create a custom Hook that we pass a piece of text into and the Hook updates the document title for us. Let's first look just at the code required to create this custom Hook:

const useDocumentTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title])
}

Above you see that all we really need this Hook to take as an argument is a string of text which we will call title. Inside the Hook we call React Core's basic useEffect Hook and set the title so long as the title has changed. The second argument to useEffect will perform that check for us and only update the title if its local state is different than what we are passing in. You mean, creating a custom Hook is as easy as creating a function? Yep, it's that easy at its core, and that function can reference any other Hook. Hot damn... Creating custom Hooks is easier than we thought!

Let's review what our overall functional component will now look like. You will see that I left the old call to useEffect commented out, above it is how we use the custom Hook for this instead. This can be viewed in an updated StackBlitz demo:

import React, { Component, useState, useEffect } from 'react';

const useDocumentTitle = title => {
  useEffect(() => {
    document.title = title;
  }, [title])
}

function Counter() {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  useDocumentTitle(`You clicked ${count} times`);
  // useEffect(() => {
  //   document.title = `You clicked ${count} times`
  // });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  )
}

export default Counter;

Let's clean it up just a little bit more and see how we might use this hook if it were supplied by some npm package instead of being copy pasted at the top of our file. I will show the code below as well as link to an updated StackBlitz demo.

import React, { Component, useState } from 'react';
import useDocumentTitle from '@rehooks/document-title';

function Counter() {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  useDocumentTitle(`You clicked ${count} times`);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  )
}

export default Counter;

This is fabulous, but I also want you to notice that I don't have to import useEffect in my functional component now, because the Hook that I imported from the npm package takes care of that. So if I don't need to useEffect in my functional component because the useDocumentTitle Hook does it for me, I can omit that import. I hope this illustrates the very basics of creating a custom React Hook and that you see the power even with such a simple example.

Here are the two StackBlitz examples side by side if you want to fork them and play around!

1. Extract a Custom Hook from Existing Code
2. Import a Hook From NPM or Co-located File

Big thanks to Amit Solanki who made this document title Hook available as an npm package as well as Adam Rackis for contributing such a profound outlook on Hooks in a brilliant tweet that inspired me to write about the subject. The developer community has embraced Hooks and that cannot always be said about new features of a framework when they first are released. I want to also thank the React Team for the way they take their time with these features and ensure they get ample feedback from the community as well as take a gradual adoption strategy for rolling this amazing and revolutionary stuff out!

This demo is the simplest example I could think of to illustrate how to create a React Hook and I couldn't think of a better first Hook to introduce you to in order to get you thinking about creating your own custom Hooks! The easiest way to discover more React Hooks that you can either copy and paste into your code or npm install is to visit these GitHub related links:

We on the Test Studio team value our customers and their feedback. While criticism is valuable and helps us craft a better product, it is always a pleasure to hear what is working well too.

Smooth Fusion, a Progress Sitefinity partner, recently decided to start using Test Studio for their test automation and was impressed by the capabilities of the tool and how it helped them release high quality applications. This triggered Brad Hunt, President and Co-Founder of Smooth Fusion to write a blog post for Test Studio.

You can check out Brad's post over on Smooth Fusion's site and see what he has to say (and show) about how Test Studio works for him and his team. It's a great read and we appreciate the time he took to write it.

Having a strong Quality Assurance team is essential to building functional software, and @ProgressSW Telerik Test Studio makes our team more efficient. Check out this article below to see how we have integrated automated testing into our process.https://t.co/D11HGpuT17pic.twitter.com/iTfRNe70wP

— Smooth Fusion (@smoothfusion) January 29, 2019

If you want to try Test Studio yourself, start a free, fully functional 30-day trial here:

Try Test Studio