How To,Resources,Tutorial,Wintellect Blogs

Building JavaScript Applications with Angular and Redux

Eric Greene

12 Apr , 2017  

Introduction

The web application world has been disrupted by the plethora of JavaScript technologies which has transformed the development of web applications from being a primarily server-side effort, to primarily a client-side one. Ever since jQuery made cross-browser web applications easy for everyone to create, a steady stream of JavaScript libraries and frameworks have been released at a frantic pace, with each one doing something better, or faster, or both. The overwhelming pace of advancements has left the JavaScript developer exhausted, and the reluctant server-side developer sometimes generations of JavaScript advancement behind. For anyone seeking to catch up, the key is to identify the latest technologies which survive the all-too-common quick obsolescence many JavaScript technologies experience. Instead, JavaScript technologies which will form the cornerstone of many applications today and far into the future need to be selected. Two technologies which fit this requirement are Angular and Redux. Angular is a framework, and Redux is a library, but when combined, they provide a powerful approach for solving many of the problems associated with the building of web applications and cross-platform user interfaces in general.

Angular is a massive user interface framework. It is a highly opinionated and comprehensive solution to many of the challenges of constructing modern user interfaces, particularly within a web browser.… Read more

, , , , ,

Wintellect Blogs

Using Redux to Manage Angular2 Application State

Dave Baskin

3 May , 2016  

In this post, I want to focus on managing application state. In the example application, I tried to create an application that had a reasonably complex user interface (“complex” is relative here, of course). The user interface needed to show where changes in one area of the page had immediate impact on other areas.

If we look at the “edit view” of the application, there are three panels: the list of images grouped by tags, a details table of image information, and the image edit panel. User actions performed in one of these panels have an immediate effect on the other panels.

example-app-edit-view

For example,

  • In the details table, a user can sort the image details by the image title, size of the image, and by the date the image was taken. When the images are sorted by title, changes to the title in the edit view are reflected in the table itself and may change the order the images are listed in.
  • Changing the order that images are sorted by affects not only the details table, but also changes the order that images are displayed within each group. Images in each group will be sorted in the same order as the detail table.
Read more

,

Wintellect Blogs

Big Ideas Behind Angular2

Dave Baskin

12 Apr , 2016  

When I first started using AngularJS (way back in version 0.8, I believe), I was continually impressed at what it could do. The team I was working with at the time had many discussions on how this young framework could be used effectively within our project. We found ourselves experimenting with different techniques and slowly figuring out what patterns worked best. We were rewarded with many “Aha!!” moments that showed us how much insight went into the framework.

As you probably already know, there’s a new version of AngularJS that is close to being released. The Angular team basically took a step back and considered all the things they learned building Angular1, many ideas and techniques that came about as browser technology matured, and advances to Javascript itself (ES2015 and TypeScript), and rewrote the framework to be a better platform for creating modern web applications.

I’ve spent some time working with the new Angular2 framework and now have a better sense of how it is used. I think the Angular team has done a great job of improving the framework.

I’ve built an example application to manage a list of images. It’s not a full featured application, but I wanted to build something that had a reasonably complex user interface and also incorporated routes and UI controls (and wasn’t a To-Do application).… Read more

, ,