Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Welcome to the Fitness Frog Client App

5:23 with James Churchill

Let's take a look at the Fitness Frog Client App and see how it differs from an earlier version of the application.

Fitness Frog Apps

You can preview both versions of the Fitness Frog apps via these URLs:

Additional Learning

In an earlier Treehouse course, we saw how we could create a web application 0:00
using ASP.NET MVC to render HTML forms. 0:04
In this course, we'll be working with the new version of this application, 0:09
one that is built using Google's Angular framework. 0:13
The first version of the Fitness Frog web app uses ASP.NET MVC 0:17
to render a series of views or pages. 0:21
For example, when a user requests the homepage, the server retrieves 0:25
the data for the user's tracked fitness activities from the repository and 0:29
renders a view containing a list of entries. 0:34
The final rendered HTML content is returned and 0:37
displayed in the user's web browser. 0:40
Whenever a user adds, edits ,or deletes an entry, 0:43
another request is sent by the user's web browser to the server, which renders and 0:48
returns a complete webpage to be displayed in the web browser. 0:53
This process, which is repeated for each action a user takes in our web app, 0:58
is known as the HTTP Request-Response Cycle. 1:03
The new version of the Fitness Frog web app is built using the Angular framework. 1:08
The HTML, CSS, and JavaScript that makes up our web app, along with 1:13
the JavaScript for the Angular framework, is requested from the server and 1:18
loaded into the web browser as part of the user's first request. 1:22
When the user performs actions in our web app, 1:27
requests are made using Angular to an API running on the server. 1:29
Angular makes these requests in the background, so 1:35
that the initial page that was loaded stays loaded in the web browser. 1:37
When the API on the server returns a response, Angular will 1:43
update the state of the web app, including modifying the currently displayed 1:47
page in the web browser to reflect the success or failure of the user's action. 1:51
As long as the user keeps using our web app, 1:57
the initially loaded page will stay loaded in the web browser. 2:00
Because of this, 2:04
these types of web applications are known as Single Page Applications or SPAs. 2:05
Single page applications enable new ways of thinking about the design of web apps. 2:12
This is made possible by the simple idea of delivering your web app to the user's 2:17
browser as a single page, and keeping that page loaded throughout the user's session. 2:22
Let's compare the two versions of the Fitness Frog web app. 2:29
Let's start by looking at the original version of the Fitness Frog web app. 2:32
The version that uses ASP.NET MVC to server-side render each viewer page. 2:36
Our home page is the Entries list page, which shows us a list of our entries. 2:42
We can click the Add Entry button here in the upper right hand corner 2:49
to add a new entry. 2:53
All of the required fields have default values, but if we remove a value, and 2:54
click Save, we can see the client side validation keeps us from submitting 2:59
the form until we've provided all of the values. 3:04
After adding the new entry, we're redirected back to the Entries list page. 3:10
We also get a notification here at the top of the page 3:15
that tells us that the entry was successfully added. 3:18
To edit an entry, we can click the Edit button on an entry row. 3:23
And to delete an entry, we can click the Delete button. 3:38
When deleting an entry, we're taken to a page to confirm that deletion. 3:42
And now, our entry has been deleted. 3:47
Let's take a look at the SPA version of the app, the Fitness Frog client app, 3:50
to see how it compares to the server-side rendered version. 3:54
The Entries list page looks very similar, at least at first glance. 3:58
Overall, the visual design of the app is consistent with the server-side rendered 4:04
version of the app. 4:08
The Add Entry page also looks very similar. 4:12
And it has client side validations to keep us from creating an invalid entry. 4:15
Notice that notifications are implemented differently. 4:28
Toastile notifications can be used here, because the page is never unloaded. 4:32
Now, let's try editing an entry. 4:37
Instead of being sent to another page, we can edit an entry with inline editing. 4:41
This approach keeps the user in their current context. 4:47
Now, let's try deleting an entry. 4:55
And again, instead of being sent to a different page, 4:59
we can confirm the deletion right here on the Entries list page, 5:02
which keeps the user in their context. 5:06
While the SPA version of the app isn't dramatically different from 5:11
the service side rendered version, it does have some nice, 5:15
user-focused improvements like inline editing and deleting. 5:19

You need to sign up for Treehouse in order to download course files.

Sign up