Aurelia gitter10/7/2023 ![]() Under the hood, the Aurelia CLI uses RequireJS and as such all dependencies are referenced via the Asynchronous Module Definition (AMD) format. Redux is the package for the library itself and redux-undo is a simple plugin to add undo/redo features for our application’s state container. Marked is a full-featured, easy to use markdown parser and compiler, which we’re going to use for … well for exactly what it says on the tin. Since the Aurelia CLI builds on top of npm modules we can do this with the following command: npm install -save marked redux redux-undo The next step is to install the necessary dependencies for our upcoming project. So without any further ado, let’s get started. ![]() All of the code listings also link back to their original source files. Throughout the article you will see several references to the official Aurelia docs, to help you find additional information. That’s why we’ll use the the redux-undo plugin to handle this for us. Anyone who has built this kind of functionality from scratch knows that it is quite easy to get started, but things can quickly get out of hand. The final version will implement the undo/redo feature. That way you will learn how to use Aurelia’s out of the box features to accommodate a Redux development process. We will use a vanilla approach, which means no additional plugin to handle the interop. The second version will introduce Redux to handle the application state. We will look into building the example the classic Aurelia way using two-way data binding. Here you will learn how to setup an Aurelia app, configure the dependencies and create the necessary View and ViewModel. The first version will use a pure Aurelia approach. In this article, I’m going to build three versions of the same component. Since we won’t go into detail on the way Redux works, if you’re in need of a refresher, and have a couple of hours to spare, I can highly recommend giving the series a shot. Note: When learning something new, I prefer to go back to the source and in the case of Redux, there is this awesome Egghead Video series by the Redux creator (Dan Abramov). The code for this tutorial is available on GitHub and there is a demo of the finished project here. We’re going to build a simple markdown editor with undo and redo functionality. But rather than build yet another counter example, we’re going to do something more interesting. In this article, we’re going to cover the basics of how to use Redux with Aurelia - a next generation open-source JavaScript client framework. It stores the entire state of your application in a single object tree. For those of you who haven’t caught the hype train yet, Redux is a library that helps you to keep state mutations predictable. One of the most prominent implementations of Flux is Redux. Nowadays, when developing a web app, a lot of focus is placed on state containers - particularly on all sorts of Flux patterns. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! Thanks, too, to Simon Codrington for styling the demo. This article was peer reviewed by Moritz Kröger and Jedd Ahyoung.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |