I am mostly lost in this particular topic.
I want to develop a full stack app with Rails using sqlite 3 as back end now that is good and all, but as a comparison to that full stack app i need to do a single page app. I have no single idea how single pages work? How do you talk to the database, do you use MVVM as a architecture? Were does single page differs from stack? I have a lot of questions if someone could describe in detail what single page app is in reality i would certainly be grateful.
If possible to describe sort of the tools needed for a single page do you need just Angular js and MongoDb and you are good to go? Can you implement ajax? Please I know that it is a total newbie question but i haven't found any real detailed resource about the differences of full stack vs single page.
Ruby on Rails has now an API only mode.
For the UI I would use a JavaScript MVC framework such as React.js or something like Angular
Both links here are for a back-end API built with Rails.
There is no versus between single page and full stack. A single page can consist of multiple stack eg. Front-end, Back-end.
Angular JS is one of the most reputed framework for MVC to create a single Web App. You can use ajax too easily with build in Angular JS service.
Take a look into React.js, GraphQL, Relay stack for building single-page apps (used at Facebook). Here is a a nice starter kit which may help you to get started: https://github.com/kriasoft/react-starter-kit (disclaimer: I'm the author)
Related
I will start to develop a new Project and i want use Asp .NET core and angular.js but i have a question what is the better way, use asp.net and angular together or separately?
I defined my architecture in this form
Cliente1(Angular)->RestApi->BussinessLogic->DataAccess->DB
yes, i see that my architecture says me that i need manage asp .NET and angular js separately, but I'd like to hear any suggestions.
UPDATE:
thank you for your answers, in the end both they have their pros and cons, i would like to share with you this articles:
Together: http://proudmonkey.azurewebsites.net/asp-net-core-getting-started-with-angularjs-2/
separately:
Part one: https://chsakell.com/2016/06/23/rest-apis-using-asp-net-core-and-entity-framework-core/
Part two: chsakell.com/2016/06/27/angular-2-crud-modals-animations-pagination-datetimepicker/
In general in programming you should separate your logic the most you can.
You will want to separate both projects for so many reasons :
You have a web app right now (angular) but maybe in a near futur you will need to have a mobile app (hybrid or native)
You can be more than one person working on the project, for example you will maybe need some designer/integrator to work on the app, and you dont want to share with him your back end, same applies if you have a back end guy.
two projects means maybe two source control repositories, means more control on branches, versions, rolling back ...
etc ...
I hope this can help.
If I see other benefits, ill update this answer.
Keep them separate, your MVC Part will be mainly REST APIs which has nothing to do with the JavaScript, HTML and CSS in the Angular Project, besides, if you want to build another client, EX: Mobile, then it will have its own project as well, this way you will have a clean structure for your solution.
So, you should have the following:
YourProject.REST
YourProject.Angular
YourProject.MobileClient
Also, the separation will make it easier for the teams working on the project, the one who will work on the front end doesn't have to worry about any other code not related to his tasks, the same for the developer working on the APIs, and each project can be structured as per the best practices for its technology.
You question is opinion based more than facts, so here is my opinion.
I have done few projects with ASP.Net MVC, Web API and AngularJS. They all stay in a single Web Application Project. Note: I have few class libraries for strongly typed Angular Helpers, Business Logic and Data Access.
Here are the advantages
I authenticate user using Owin Middleware, then redirect to Angular. The main advantage is I do not have to maintain Bearer Token or Authentication Cookie explicit inside Angular.
Second, I use csthml as strongly typed Angular view rather than plain html. It is the best of both world.
Last but not least, you can debug it easily rather than starting two projects at the same time, so that I can save resources on development machine. Everyone know Visual Studio is a memory hungry IDE.
I'm thinking of using Angular or React for a new web project but the SEO are an important part. From what I have read there are ways to solve it but it always results in keeping two page version alive or using an external service that renders the pages.
This sounds like bad options to me?
I have also read some unclear info about that search engines now can read javascript webpages with for example angular or react?
Could someone clarify this for me? Will SEO be as good with Angular as if I was using, for example, ASP.NET MVC?
Can't speak for Angular but React.js is perfect for SEO. The reason is that every state of your application can be fully rendered server side.
So this is not like your traditional ajax page where you have your base view and then do some ajax/javascript stuff to go to the next state.
I'm about to embark on a large project based around mobile web apps. I am going to create a mobile web app that will have multiple screens, a search system and a few other features.
I need to establish a primary framework for this application. It seems I have two options; multiple separate HTML pages, or alternatively, use AJAX to download the contents and move divs in and out of the viewport.
I don't have to worry about SEO. I'm primarily looking for good performance. I understand Stack Overflow is a site about questions and answers and this does somewhat involve opinion, but I feel that based on my criteria there should be a solid answer to this question.
I'd highly appreciate it if somebody could share what they think the best option would be for me on this project.
What I believe you're referring to by using AJAX to download the contents is commonly known as a single-page web app. These generally involve rendering data using templates on the client side and sending and receiving the data via AJAX.
For these, there are plenty of excellent JavaScript framework options, including:
Backbone.js
Knockout.js
Angular.js
Ember.js
Of these, Knockout is probably the easiest to learn (seriously, the tutorial is brilliant), but the lack of routing lets it down somewhat. I tend to use Backbone for this type of thing myself, although if I were starting over I would probably go for Angular as it's made by Google and seems to have more momentum. But try a few tutorials and see which one works best for you!
All of these offer a lot of very handy functionality for your use case, as they enable you to load data via AJAX and render it on the client side quite easily. There is a learning curve for all of them, but they result in a much more maintainable and testable client-side application. Believe me, I have tried to build such an application with just jQuery, and I would recommend you avoid it as it gets very painful, very quickly!
Your mileage may vary, but by and large a single-page web app like this should perform better than a more traditional web page because once the application has loaded, all the communication with the server is just sending and receiving JSON. It will also likely be simpler as you can use a lightweight REST framework like Slim, Sinatra, Express or Flask on the server side, and just serve up the static content on the home page, then do everything else via AJAX.
I have come accross an sample application with dojo 1.5, but it's not really what I want to achieve : it is not modular at all. I want to make use of the amd, and various design patterns (like MVC) to have a very organize application. Unfortunately, the dojo community and "example" are not quite visible or present (compare to Jquery). There's a lot of cool tutorials on various implementation of specific dojo features, but none that's explain the very basic on how to create a simple (but at the same time, complex) squeleton for a dojo project. I came across the dojo boilerplate project on github, and tried to start from there, but I find it really hard (as a beginner) to implement such trivial things such as an login or basic interface (and separate all that by module, event handling, data, etc.). I just don't want to make a dojo application by using only an index.html and one javascript file, I could do it, but for maintenance and adding stuff, it will just be a complete mess. With this post, I hope to gain some information on this specific subject and perhaps create a tutorial for dojo on how to start up a real web application. For example, applying the mvc pattern, I think a good application tutorial should have a login example (authentification) and a basic modular interface (like some kind of main container, and on various events, the container ui change for instance with different widget). I'll be working on something on github and posting up when I'm done. If your done before go ahead ;)
thank you.
There is TodoMVC at GitHub:
a project which offers the same Todo application implemented using MV*
concepts in most of the popular JavaScript MV* frameworks of today.
It employs dojox.mvc #PEM mentioned. It's not a typical way of building Dojo applications as dojox.mvc was released just on May 16th, 2011, but it is worth looking at. There is also live demo and tutorial Creating Todo MVC in Dojo:
Overview
Part 1: Models
Part 2: Views
Part 3: Controllers
Also have a look at the source code of Dojo Web Builder (+ article Introducing the New Dojo Web Builder).
Last but not least is Maqetta (sources at GitHub), the most complex Dojo application one can find. Look esp. in maqetta.core.client/WebContent/ directory.
Maybe you have not searched enough?
Dojo MVC :
http://livedocs.dojotoolkit.org/dojox/mvc
http://dojotoolkit.org/documentation/tutorials/1.7/data_modeling/
I just don't want to make a dojo application by using only an index.html and one javascript file
But that's basically what Dojo is for and good at...
If you just want to make cute animation on a plain old html website, rather go for jquery, it's sexier.
Now if you want to do a "real web application" then dojo is the right framework. But you'll also have to learn how to use it.
There are a couple issues with building a sample application tutorial.
First, a sample application with what you have described will need a web server to communicate with. Dojo is web server agnostic, so what technology do you choose to for the sample application? Secondly, a server is now required to make the demo available online, or the person interested in looking at the demo would need to install the web server. As simple as this sounds, it is a barrier and prevents a more novice person from continuing.
Second, even with a web server there are many ways to build/architect a web application.
I think a good application tutorial should have a login example
(authentification) and a basic modular interface (like some kind of
main container, and on various events, the container ui change for
instance with different widget)
From what you have posted, it reads like you are looking for a single page application. There are downsides to single page apps (such as SEO) and creating a sample single page application needs to make it clear to the developer what the downsides of using the sample are. It's not the magic bullet for all Dojo/Web applications.
I have a project up on Github and it certainly isn't ready for primetime, but you can take a look. This is a Single Page Application that uses Java/Spring for the backend server. I am a couple days away from checking in the Spring Pet Clinic example which will demonstrate some of the functionality. I also need to update the wiki to describe how to create a sample application.
https://github.com/cswing/evinceframework
Also, I use the theme tester often to take a look at different widgets. Not entirely what you are looking for, but some who get to this question may find the link useful.
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html
I am having great difficulty choosing which frameworks to use for an app that is about to go into development. I am a front-end guy, and my friend is doing the back-end.
Say I was developing a simple todo list app. I have a template for each item on the todo list. Ideally, I would want the server-side JavaScript to use this template as well as the client-side JavaScript.
So on page load, if there are already 5 todos in the database, the HTML will be compiled on the server. If I then add a new todo item to the list, the client-side JS will compile the HTML using the same template.
I've heard a lot of buzz about Node.js, Backbone.js, etc. It is quite overwhelming just how many options there are for this sort of thing. Can anybody give me examples of using these technologies together?
Node.js is JavaScript on the server-side, while Backbone.js is used to structure your front-end stuff elegantly, using collections, models and views.
Each of the two has their own role. For a better comparison between front-end frameworks you can check Addy Osmany's TODO list, written in a LOT of them: https://github.com/addyosmani/todomvc
There are some nice tutorials over the net on Backbone also:
- http://dailyjs.com/2011/04/04/node-tutorial-19/
- http://backbonetutorials.com/
- http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/
Here's an application that combines Node.js on the server with Backbone on the client:
http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/
Backbone (like Node.js) is really popular so you would get a lot of help / resources online.
Sure. Check out TodoMVC to get a better idea of various alternatives.
Paste the template file at the bottom of the page. This way your client code can use it easily without making a call to get the template.
An Example using JQuery when calling your template would be
<div style="display:none" id="sample_jquery_template">
Hello ${name}
</div>
in your client side javascript code
..javascript..
person = {name:'Joe'}
$.tmpl($("#sample_jquery_template").html(), person ).appendTo( "#destinationList" );
There are enough templating solutions out there like mustache.js working on both ends.
But for working with the templates on the client-side it is helpful to have the rendered data available.
Henrik Joreteg wrote a nice article about reusing your backbone-models and syncing them between client and server.
Dav Glass from Yahoo gave a good talk showing how he ran YUI3 on the client and server with node.js.
Here is his github of the examples from the video:
You also might be interested in checking out jsdom
I just started learning node and this video really helped me see how to experiment on the server and client with node. You will see him disable javascript and the calendar still works - that was cool.
And here is a good backbone resource:
You might have a look at http://derbyjs.com/#why_not_use_rails_and_backbone
They try to achieve the following when opening a webapp:
Transmit a completely rendered page on the first request.
From then on all changes shall be directly made client side and synced to the server via ajax.
So usually the first request a user makes to a site with a "fat" client is pretty painful:
App data has to be transferred and initialized
Data has to be loaded by the Client
Data is displayed
This behavior is usually way slower than transmitting an oldschool like server side rendered page. Gmail or iCloud for example need some time to load up because they do it like this.