CodeProject Hi Friends, It gives me immense pleasure to share the 1st chapter of this book.
Chapter 1: Getting Started
WHAT DO you find in this CHAPTER?
- What is SPA
- Technologies used to build SPA
- Glimpse of Movie Review App
Hi my name is Rahul Sahay and I am going to introduce this whole new story of building Single Page Application right from the scratch. Here, in this context I am going to talk about bunch of different client/server side technologies and demonstrate how these small pieces marry together and creates a robust End to End application. So, without wasting time let’s get started.
What is SPA:-
Single Page App is all about user experience. People will love your app if you give them nice user experience which not only fits nicely in your laptop or desktop rather it goes nicely with multitude of devices like tabs, phones etc without breaking any single functionality. As shown in the below diagram, these are basic requirements for building any SPA.
- Reliability: – People know that it’s reliable and it’s going to work. This kind of reliability only comes with positive experience.
- Responsiveness: – Responsiveness means it’s going to work quickly for them. Quick is the key thing which any user expect to have in the app which he is using.
- Reach: – Reach is often substituted with mobility. Mobility is again one of the key ingredient which every user is looking for. They always want to have the data handy with irrespective of what device they are on.
- Available: – This thing is really important when it comes to the point at working offline. So, delivering a good user experience is must while building SPA.
“So, in a nutshell a Single Page App is web application which fits in a single page providing a fluid UX by loading all the necessary data in a single load.” Now, apart from this there are many other attributes linked to SPA. They are:-
- Maintain History: – When you flip between pages, it maintains your history in the same order how you visited them. Actually, it’s not going on different pages rather its loading different information’s on the same page. But, it looks to user that it’s presenting different pages to them.
- Persisting Information: – Persisting information is also very important aspect of the SPA. It doesn’t mean that you need to save each and every thing at cache but you can store important things in the cache to improve the performance.
- Mostly loaded on Page Load: – Mostly loaded on the page load means majority of information user required to use gets loaded initially itself to avoid roundtrip back to the server.
- Dependent Elements: – As and when user requires to access different features of the application, app will go and download for the user.
Technologies used to build SPA:-
Movie Review app is built using tons of different client side and server side technologies. Some of these I have listed below:- Client Side Technologies:-
- HTML 5 & CSS
- Modernizer & LESS
- Media Queries
- Responsive Design
- Angular JS
- Toastr JS
- QUnit JS
- Change Tracking
- And many out of the box things
Server Side Technologies:-
- SQL Server
- Entity Framework – Code First Approach
- Repository Pattern
- Unit of Work Pattern
- Web API
- JSON & AJAX
- Ninject IOC
- POCO Models
Glimpse of Movie Review App:-
Glimpse of Movie Review Solution:-
Let me go ahead and show you the solution structure of finished app. Below in the screen shot, I have 5 different projects. Each is having its on dependency and responsibility. Here, the highlighted one is the web project which is dependent on other infrastructure projects Data, Contracts and Model. Data project is the place where in you maintain initial seed data, Entity Framework DBContext and many more things involve direct interfacing down the layer with database. Data Contract is the place where in you manage your repositories and apply Unit of Work Pattern on repositories like movies and moviereviews. Model is the place where you will be having your POCOs (Plain Old CLR Objects). This is the place where in you are maintaining all properties attributed to the tables. Below is the glimpse of all projects in its expanded form.
In the below screen you can find, that almost at every parameter, angular app is lightning fast.
In this section, we have seen the bits and bytes of the Single Page Application which we are going to make using tons of client/server side framework. We have also seen the glimpse of app and solution. In the next section, we’ll begin the learning by creating the application right from the scratch. I would recommend you to download the app from github URL shown below to help you while building https://github.com/rahulsahay19/MovieReview-Angular-Prod . I hope you have enjoyed the glimpse. More more info you can have the same from the below mentioned link.
14,257 total views, 3 views today