Welcome to the Fitness Frog Client App

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