What is best source to learn about Single Page Application development? - javascript

I am new to Javascript and have started watching some Backbone.js tutorial on youtube. I have a background of working on Backend where I developed web-services.
I want to learn to develop websites using framework like backbone.js/angular.js

To start with, you should know how these framework helping you to create the Single Page Application. Take for example angularjs,
ng-view
Routing Concept.
Ajax Support like $http service.
Your back-end APIs
Creating sample Single Page Application here. Some concerns with single page application are mentioned in these two blogs.
Memory Management in Single Page Application
Designing Model
for Single Page Application

Related

Angular JS - Front end web development framework?

I am confused by the term Angular JS being a front end web development framework and (Spring MVC or Node Js) being a back end or simply web development framework.
My question is:
Can I built a full fledged web application which interacts with an application server like Tomcat and MySQL using just Angular JS?
If answer is "no" to 1(above), then my understanding is that I learn Angular JS for front end and (Spring Boot or Node JS) for back end. If that is the case what role does Angular JS play, which HTML, CSS and JavaScript already does not play?
If I use Angular JS, how does HTML, CSS and Javascript which were used traditionally fit in the picture?
I know there are lot of resources in the web but I am still not very clear.
Thank you in advance for your help!
No, you cannot build a full fledged web app in AngularJs. AngularJs is a JavaScript framework that runs in the browser (front end), not on the server (back end). Unless your application is very simple, your AngularJs application will interact with service(s) to get and set data.
Before even talking about AnglarJs' features, one aspect that a framework gives you is a pattern and guidelines that help with organising your code. If you start writing code without any framework, you have to invest more effort in thinking about how to structure your code. While you still have to do that with a framework, there are usually guidelines that are established by the community that will help you as the code base grows. Now, AngularJs is a Single Page Application (SPA) framework. That means that one of the features that AngularJs gives you is client-side (browser) routing. That allows you to only change the sections of the page that actually need to change instead of refreshing the whole page, resulting in a nicer user experience. AngularJs also gives you two-way data binding. Two-way data binding will automatically reflect JavaScript model changes in your DOM, and vise-versa. In vanilla JavaScript, if a values changes and you want to show that value in the DOM, then you need to write code that will actually apply that change in the DOM. With AngularJs' two-way data binding, that is taken care for you. AngularJs has many more features (dependency injection, components, directives, filters, etc.) that you can all find on the web, but hopefully the two examples I gave you give you an idea.
From my answer to question 2, you may realise now that you will still use HTML, CSS, and JavaScript. AngularJs is not a language, but a framework built on top of those languages.
By the way, at this stage I would not recommend building a new app with AngularJs. Use Angular instead. Angular is the successor of AngularJs.

Recommendations for a web application with Laravel

Im creating a web application with PHP (Laravel 5.) and currently AngularJS (1.). There are some components of the website that i want to build with Angular. For example a Form Generator. A user can click buttons and define which kind of field he/she would like to create. After that, the user can implement it on his website and receive submissions on it. This can be a small app build with Angular.
Currently Angular 2 is a R.C. version, which can be released soon. To keep myself triggered with the newest techniques, i started to explore it a bit and noticed the TypeScript with compiler which runs behind the public(_html) of a application.
Lets split my application in URLs to make my question simpler:
www.domain.com/form-generator -> Uses the script: /angular/form-generator/mainModule.js
www.domain.com/easy-importer -> Uses the script: /angular/easy-importer/mainModule.js
www.domain.com/my-other-small-app-> Uses the script: /angular/my-other-small-app/mainModule.js
Is it possible, efficient and recommendable to create small modules/apps that are loaded on base of the application i build instead of loading them all together? Is Angular 2 recommendable for this or should i consider jQuery and keep Angular 1.*?
If you're looking for a front-end framework to use with Laravel, I reccomend vue.js. Taylor Otwell, the creator of Laravel, has indicated that vue.js is his front-end framework of choice.
Keep in mind, you can use any front-end framework you want. Research what's out there and pick based on your needs. Laravel is not tied to any single front-end: it's your decision.
I only suggest vue.js because it's been adopted by a significant portion of the Laravel community. That community can help you out when you get stuck, and have resources to help you get started. Personally, I watched the Laracasts by Jeffrey Way to get up to speed.

AngularJS applications imply single page applications?

So I just spent the past 5 hours reading up on Angular JS. It seems like a lot of people are heavily associating this framework to single page applications especially when accommodated with a back-end MVC framework with nice API usage like Ruby on Rails or Laravel.
I have 2 main questions that have been boggling me:
How do you initialize such apps considering that the content is
dynamic in nature. When using something like RoR/Laravel, I'd prepare
the HTML with the dynamic data at the back-end and then serve the
initial pages. It seems like most people using Angular serve up a
basic skeleton of the HTML and then do a round trip to web server
again for some data. Is this really how its done? if not, please
suggest a the right way.
Secondly, I dont think I am about to embark on a project with a
single paged application in mind. Does that mean it would be overkill
to use AngularJS for my project. Does anyone have a use case that
they think is appropriate that would require AngularJS with non
single page application that jQuery cant handle easily?

AngularJS Website - Full or Partial

I would like to build a new web site using AngularJS. The idea is to build a server side API with Ruby on Rails that serve Json to a front-end AngularJS.
My question is: Is it better to create a full AngluarJS front-end or a standard ruby on rails front-end with some Angular ?
I know Angular can handle routing so a full application is possible but it looks like the default behavior is for single page app.
For example I wonder if it's not a problem to make some change in an angular page 1 that should modify a page 2. This page 2 will not be updated until an action is taken on the page or the user reload the page.
Is there something wrong in my approach ? What do you advise ?
Thanks for reading.
I have personally done variations of a number of angular apps, varying from SPA with 50K+ views to simply using angular as an extension of basic javascript for useful testing and modularization.
The answer to your question isn't actually all that technical but more has to do with the nature of your application and team (You're essentially trying to pick what type of screwdriver to use). As what you're trying to do is feasible on both the client and server side.
Important questions to ask:
Is your team more comfortable in Rails or Angular
How dynamic are your web pages expected to be
What browsers are you supporting
Is there a requirement for data latency and communication with the server
Are you also going to be reusing the server API for other applications
These questions will drive you towards use of Angular or Rails or the combination of the technologies to find the balance.
The routing mechanism in angular is only within a single window object.
If you have two windows you will have two angular applications. If you want to communicate between the windows object angular does not provide any special mechanism further than standard HTML and javascript.
I don't know what is the better approach for you, that depends in your business requirements and constraints.

ASP.NET MVC - Backbone js - Organize multi page mvc app

We have a project using ASP.NET MVC 4 and it is a multi page mvc web app. We are planning to use Backbone js as the front end javascript framework . What is the best practice or suggestion to organize the backbone js code for the multi page mvc web app?
How it will be organized if we use Knockout js instead of backbone js.?
Thanks,
Sarathy
In my experience, Backbone is best used for SPA's (Single page apps). It is designed to help bring structure to javascript heavy applications. You first need to tell us why you are looking to use either of these libraries and a description of the site or app you are building? Are you using MVC 4 Web API, because Backbone connects to your existing API over a RESTful JSON interface and Web API is a perfect fit for this.
The only reason I would see to use Backbone for a multi-page mvc web app, is if you are looking for the app to function with javascript disabled and progressively enhance the app with Backbone. If you are looking to use pushstate, then you would also need to serve the individual pages.
I think the best bet is to look at TODOMVC to get a feel of the different libraries. Look how they work and see which, if any, would be a good fit for your app.

Categories

Resources