Programming Articles

If you do a lot of client-side manipulation of the DOM using JavaScript or jQuery, you might want to consider using one of the many templating engines available. I'm sure you've built some HTML within a string in your JavaScript code. Using string concatenation to build a set of HTML elements leads to hard-to-read and hard-to-debug code. Instead of using string concatenation, take advantage of a templating engine. A templating engine separates the HTML to generate from your code and data, which makes your code easier to read and makes it much easier to locate bugs. As every programmer is aware, separation of concerns (SoC) is a best practice. When you employ SoC in your applications it immediately increases the readability and maintainability of your application. In this article, I'll show you several techniques to make your client-side scripting simpler, easier to read, maintain, and debug.

In the last two parts of this article series, you created a web server using Node.js, Express, and JavaScript. You built a series of API routes to retrieve an array of products and a single product, searched for a set of products, and added, edited, and deleted products. The product data was retrieved from a connection to a SQL Server database. In this article, part three of the series, you'll build a website using Node.js and Express to serve web pages. You're going to see how to use a templating engine, Mustache, to create dynamic web pages from the data retrieved from API calls. To communicate from your website to your Web API server, you must configure cross-domain resource sharing (CORS). You'll see how to enable CORS in your Web API project. You'll then build a set of search, add, edit, and delete pages that make calls to your Web APIs.

In Part 1 of this article series, you created a web server using Node.js, Express, and JavaScript. You built a series of API routes used to retrieve an array of product objects, search for a single object or a set of objects, and add, edit, and delete objects. In this article, you'll move some of the hard-coded values from the code into a configuration file and read those settings into your application. You're going to add middleware functions to handle exceptions. You're going to write different types of errors to different locations, such as to the console and to a file. Thus far, the set of product data coming from the API calls has been from a JSON file. In this article, you'll learn to retrieve the same data, but from a SQL Server table.

Many developers use JavaScript to add client-side functionality to their web pages. JavaScript can be used to create server-side web pages and Web APIs too. In this three-part article series, you're introduced to Node.js and Express and you'll learn their roles in the creation of a web server. You're going to build a new web server from scratch, create some routes to return data, and learn how to modularize your web application. You'll be guided step-by-step to creating a set of APIs to return an array of objects or a single object, search for a set of objects, and add, edit, and delete objects. If you've never used Node.js or Express to build a server, don't worry: this article has everything you need to learn the basics of working with these two powerful tools.

This article continues my series on how to enhance the user experience (UX) of your MVC applications, and how to make them faster. In the first three articles, entitled Enhance Your MVC Applications Using JavaScript and jQuery: Part 1, 2, and 3, you learned about the starting MVC application that was coded using all server-side C#. You then added JavaScript and jQuery to avoid post-backs and enhance the UX in various ways. If you haven't already read these articles, I highly recommend that you read them to learn about the application you're enhancing in this series of articles. In this article, you continue learning how to add more Ajax to your MVC application to further speed up your Web pages.

In this article I am continuing my series on how to enhance the user experience (UX) of your MVC applications, and how to make them faster. In this article you are going to build Web API calls you can call from the application to avoid post-backs. You are going to add calls to add, update and delete shopping cart information. In addition, you are going to learn to work with dependent drop-down lists to also avoid post-backs. Finally, you learn to use jQuery auto-complete instead of a drop-down list to provide more flexibility to your user.

In this article, I'm continuing my series on how to enhance the user experience (UX) of your MVC applications, and how to make them faster. You're going to continue to add additional client-side code to the MVC application to further enhance the UX as you work your way through this article. You'll learn to expand search areas after the user performs a search, hide certain HTML elements when printing a Web page, and create custom jQuery validation rules to enforce business rules on the client-side.

In this first of a multi-part article series, I'm presenting an MVC application written with all server-side code to which you are going to add client-side code to make the user experience better and to make the application more efficient. Some of the things you'll learn in this article display a 'Please Wait' message for any long operations, complete with a spinner from Font Awesome. You're going to disable all buttons and links, and gray the background, while long operations take place so the user can't accidentally click on something else. You're going to learn how to use Bootstrap events to toggle collapsible areas so only one is open at a time. In addition, you'll learn to use the setInterval() function to display a countdown until the user's shopping cart is cleared.

In this article you learn to use the Fetch API which is a promise-based wrapper around the XMLHttpRequest object. As you will see, the Fetch API makes using the XMLHttpRequest object easier to use in some ways but does have some drawbacks where error handling is concerned. To make working with the Fetch API a little easier a set of IIFE's (closures) are created in this article. Using a closure makes your code easier to read, debug and reuse. You do not need to have read the previous articles to read this one. However, the .NET Core Web API project is created from scratch in the first article, so reference that article if you want to learn to build a CRUD Web API using .NET Core.

This article is going to continue with where you left off and finish creating a page that allows you to display a list of product data, add, edit, and delete products. If you use JavaScript, jQuery, Angular, React or almost any front-end framework, you most likely use Ajax to get and modify data from a server. Most of those front-end frameworks have their own wrapper around the XMLHttpRequest object. What you are learning in this series of articles is how to use this object natively. I am always a big fan of understanding what goes on under the hood as I believe it makes me a better programmer. If you are reading this article, and the last one, then you believe the same. So, let's create a CRUD page using JavaScript and the XMLHttpRequest object.

In my last article (CODE Magazine, November/December 2015), I showed you how to manipulate data in an HTML table using only JavaScript and jQuery. There were no post-backs, so the data didn't go anywhere. In this article, you'll use the same HTML and jQuery, but add calls to a Web API to retrieve and modify product data. It isn't necessary to go back and read the previous article; this article presents all of the HTML and the calls to work client-side and add the server-side code as well. I'll be using Visual Studio and .NET to build the Web API service, but the client-side coding is generic and can call a Web API built in any language or platform.

As developers, we're always asked to do more for our users. They want their Web pages faster, smaller, and with more features. This means that you have to start working more in JavaScript and jQuery on the client-side. By doing more client-side coding, you reduce post-backs to the server, thereby increasing performance. In this first article of a series on working within HTML and the Web API, I'll show you how to add, edit, and delete data in an HTML table using JavaScript and jQuery, but no post-backs. In subsequent articles, you'll learn how to take that data and use the Web API to retrieve and modify this data.