Recommended approach to writing a client-side JavaScript application - javascript

I'm considering learning JavaScript and I thought, what better way than to write an app! The idea is to make a simple school enrollment app, where the user would input enrolled student data and the app would automatically assign students to user-defined groups based on their enrollment score and group preferences.
Here are some basic ideas:
Everything happens on the client side, I just provide the logic
I don't want any of their data because it may be confidential/personal. I would consider gathering some usage statistics. To prevent them loosing their progress I would use Web Storage
As output I want to produce CSV documents, one per defined group, each containing a list of assigned students
Preferably the app will be a Wizard-like SPA.
Now for my question, I want to know 1) if there are any good resources (books, online trainings, etc.) about building such applications and 2) which libraries/frameworks are worth looking at. Please keep in mind I do want to learn the language, so I don't want tools that will do everything for me.

There are many great resources out there. I would suggest knowing Javascript first and some good tutorials are hosted at codeacademy.com. If you would like more knowledge, get a book and practice a bit through their tutorials.
I would recommend looking up some of these: Backbone, Ember and AngularJS seem to be the most popular. They are usually highly functional and easy to jump into with little javascript knowledge.They all usually include a type of routing, 2 way data-binding and a bit of extra goodies that make them unique. Explore them to find exactly what you need.
Angular: (link: https://docs.angularjs.org/tutorial/step_00) I would recommend going through the AngularJs tutorial (if you choose that framework). They teach you how to use node, karma and how their framework is set up with the seed data. This is maintained by Google so it may have a long future.
Ember.js: (link: http://emberjs.com/guides/) Has alot of tutorials and guides on how to use the framework.
Backbone.js: This is very popular and they have alot of real examples that is used by this framework.

Ofcos there are. You should seriously consider angularjs. There are plenty tutorials that has examples on user management . look up Concrete's blog on angularjs. Its also a SPA framework.

Related

React + Springboot or Springboot only for a project?

My partner and I are building a project for a class this semester. I am currently doing research on what technologies we want to use. So far Springboot for the server side and MySQL or Postgres for the database are strong contenders. I wanted to ask if we should use React or even Angular for our frontend or should we just develop multiple JSP pages for our frontend? So far in my research I have not seen many people combine React and Springboot for projects and it makes me think perhaps I am combining two things not really meant to be combined. Can anybody assist us in deciding the tech stack?
Don't ever write server-side rendered user interfaces. Create a REST api for your backend so that you can have multiple clients querying such api: today, a web app written in angular or react, tomorrow maybe a mobile version.
It depends on so many factors. Some of them are the speed at which you want to finish the project and the quality of the project.
It is a good idea to learn at least one framework and Spring is a good fit.
Regarding the front end, JSP is not a good idea. Both Angular and React are fine as long as you want to learn and develop yourselves. Something in the middle, which may be a bit easier to digest would be Vue.js. Any of these would require a lot of time investment. Since you are already planning to learn Spring and Java then you may use a template engine to make your life easier, something like Thymeleaf. This is a bit old school but it may help you achieve faster results with what you already have.
You also have the option to go on the Javascript or Python directions.
There is no really good answer here, it all depends on what you know, what you want to learn, what you hope to achieve and, of course, the end result.

AngularJS vs. AppML

I am new to AngularJS and AppML. I want to know which one is better and what is the difference between them because it seems the same to me as I have seen at W3Schools.
AngularJs is a framework that binds your HTML(views) to JavaScript objects(models). It is a MVC framework, therefore, allows you to create properly architected and maintainable web applications.
It reduces server load(PHP).
Companies like Google, Flipkart etc. are using it extensively.
Such frameworks(Backbone js, angularJs) allow to create Single Page Applications, thus making you websites more dynamic and quick.
AngularJs is backed by Google!!
It tends to push the templating to the browser in order to free the server, which now only fetches data. As a result, client-side developers have greater control over the templates. It proves useful when you want to update one section of the website without refreshing the whole page. It is a great solution with which the code can be easily reused and maintained.
Read on for more: https://www.angularjs.org/
AppML-Application Modelling Language
Earlier known as Application Markup Language, was similar to HTML/XML, but was abandoned by its creators in 2007(Source: https://fr.wikipedia.org/wiki/Appml)
It is now developed and maintained by w3schools.com
It is not so famous though and not much information is available on the Internet. Don't know of any sites which even use it!
As far as I can tell, AppML is one step above abandonware. Its original developers basically gave it up, and W3Schools took it over in February 2015.
At this point (2/23/2017), searching for "AppML tutorial" in Google gives 43,000 results, but searching for "AngularJS tutorial" gives 848,000 results. This should give you some idea of the availability of support and documentation you can expect. AppML doesn't even have an English-language Wikipedia entry.
W3School's history page claims that it's used in "over 1000" web applications. (I haven't been able to find statistics on how many people are using AngularJS yet, but I assume that it's a lot higher than that).
To get back to the original question: in my opinion, AppML has "death spiral" written all over it. I'd recommend sticking with AngularJS.
AppML is something that works but never got trendy. It's what many of us already developed for home use, maybe a bit more, and it's a good starting point if you want to build your own framework with a simple templating engine. And it's small; appml.js is 75k in its full version, 35k when minified, and that's all you need, no dependencies, no npm install, no nothing.
Again, it's not a framework at all. But in most cases when people use Angular or React, they only use way less than what AppML can do; they don't use the full power, just the very basics like a repeated list with some fields of a data object. It's usually overkill. Maybe the closest big brother of AppML is VueJS, in all its simplicity and straightforward thinking.
Here's how we stand in 2021:
You rarely do more than what AppML is sufficient for,
You never get hired without at least one of Angular/React/Vue
Therefore you will never use AppML
It's still cool :)
AppML is basicly the template engine part of AngularJS. Angular offers a lot more structures around it. If what you need is a template engine AppML should be just fine.
As of January 1, 2022, Google no longer updates AngularJS to fix security, browser compatibility, or jQuery issues. The Angular team recommends upgrading to Angular (v2+) as the best path forward Wikipedia article on AngularJS.
Now Appml maintained by W3Schoole and it provides tutorials and references.

Questions about MVC in Javascript and in general

First, I would like to ask some very basic questions about MVC in general. Simple questions, but can't find any good answer for them.
Is MVC useful for a one man project, or is it only needed, when more people work on a project to make it easier to co-op?
How big a project needs to be, to make good use of MVC. I hear everywere that I should always use MVC, but even for big projects it looks like an overkill. I can't imagine how big something would need to be, for all this overcomplicating to pay off.
I have made a single player rpg that is pretty short, and I am trying to turn it into massive multiplayer. It is all for educational purpose only. So I was thinking to redo it with MVC, but even though it has a lot of functions and data to process it still looks way to simple and clear, to bother with MVC. Maybe if I am making so small projects that I can't see the benefits of using it, I just shouldn't use it?
Will using all the MVC additional code slow down my app in visible way?
Now about Javascript, there are some solutions for MVC avaliable. Are they worth using?
Thanks
MVC is just a pattern, guidelines to organize your project and decoupling your code, so the size of the team or the project is not relevant. I've made by myself a very simple website with a list and a couple of web forms using MVC and it was pretty faster to develop than other alternatives. If you have the opportunity to work with a powerful IDE like Visual Studio, you will find that most of the common things to do for building a web page/site are already automated. And I also have worked with 12 people in a bigger project using also an MVC approach without noticing differences.
One of the main advantages of using MVC is that you can change the whole front end in the future without having to make changes in your model or controller layer.
Also, using MVC doesn't have to slow down your code, it depends on your implementation. When using ASP.MVC instead of ASP.NET, for example, the code and download times are faster, in fact. With ASP.MVC you get rid of nonsense ViewState pieces of code and the html code generated is cleaner.
In my experience, MVC is an excellent pattern to chose for working in web projects, since the front end technologies are changing very fast and it gives the flexibility to evolve with them without having to annoy about the business logic.
I hope I have helped you.
You can find more info in:
http://www.asp.net/mvc

Should I use a MVC javascript framwork for this application?

I've been asked at work to convert a popular mechanical engineering excel application to a single page web application. It requires no database so my idea is to put everything on the clientside in javascript.
First version is gonna be pretty small but more complexity will be added further along. Canvas graphics is gonna be drawn in realtime as user changes input. So performance is important. My question is: Should I use a MVC framework such as Angular JS? Or is it better to stick with Jquery? If I should use a MVC, which one is best suited for this app?
Everyone at my company uses IE9 so I dont need any support for older browsers.
Angular bills itself specifically as a way to build CRUD apps - basically database front ends. The app you're describing doesn't sound like it's doing a ton of that, so Angular would probably be more trouble than it's worth.
jQuery is a helper library - it makes dealing with the DOM easier, but doesn't do a thing to provide overall structure to your application. jQuery is a "necessary but not sufficient" in my book - you're going to want it, but it's not enough on its own.
Personally, I'd lean more towards Backbone, specifically because it's so minimal - it gives you some useful data binding stuff and some hints on how to organize your app, then gets out of your way to let you build the abstraction you want. Based on the fact that you mentioned the original is in Excel, some sort of data binding / change notification system is going to be important. This way you can emulate the spreadsheet's "change a cell and the chart redraws" system that everyone's already used to.
In the end it's hard to say without more detail on the app in question, and what kind of calculations / how often they have to happen are. Figure out what your app architecture should be, find (or build) a library that helps implement that architecture. It might be MVCish, it might not.
Well jQuery will get very messy as complexity increases. Angular JS is an amazing library but there are also a myriad of different ones out there. Depending on the Mechanical Engineering principles you are working with using AJAX may prove to be more perform-ant, due to the lack luster power of some older browsers.
It really depends on the complexity of the calculations, but in terms of dealing with events and managin the structure I would suggest using Jquery as well as Angular on top of it. then make the decision about whether or not to move some functions to the server or not, based on performance.

Is AngularJS just for single-page applications (SPAs)?

We are looking at options to build the front end of an application we are creating and are trying to evaluate a tool that will work for us and give us the best platform to move forward.
This is a Node.js project. Our initial plan was to use Express and go down that route, but we decided that before we kick off this stage it might be best to review what is out there. Our application has several areas which we don't believe fit the single-page model in that they are related from an application perspective, but not from a view one.
We have seen a few of the frameworks we could use to build out the client like Backbone.js, Meteor, etc. and also AngularJS.
This may be a fairly obvious question, but we cannot seem to decipher if AngularJS is purely for single-page application or it can be used for multi-page applications like Express for instance.
UPDATE 17 July 2013
Just to keep people in the loop, I will be updating this question as we go through the process. We are going to build everything together for now, and we will see how well that performs. We have reached out to a few people who are more qualified with AngularJS than us and posed the question regarding splitting up larger applications that share context, but may be too large working on a single page.
The consensus was that we could serve multiple static pages and create AngularJS applications that work with only those pages, effectively creating a collection of SPA and linking those applications together using standard linking. Now our use case is very specific as our solution has several applications, and as I said we are going to try the single code base first and optimise from there.
UPDATE 18 June 2016 The project fell of a cliff, so we never got round to getting too much done. We have picked it up again recently, but are no longer using angular and are using React instead. We are still using the architecture outlined in the previous update, where we use express and self contain apps, so for example, we have a /chat route in express that serves up our React chat app, we have another route /projects that serves up the projects app and so on. The way we are kinda looking at it is each app is an aggregate root in terms of its feature set, it needs to be able to standalone for it to be considered an app in itself. Technically, all the information is out there, its just basic express and whatever flavour of client side app building goodness you want to use.
Not at all. You can use Angular to build a variety of apps. Client-side routing is just a small piece of that.
You have a large list of features that will benefit you outside of client-side routing:
two-way binding
templating
currency formatting
pluralization
reusable controls
RESTful api handling
AJAX handling
modularization
dependency injection
It's crazy to think that all of that "could only be used in a single page app". Of course not.. that's like saying "Jquery is only for projects with animations".
If it fits your project, use it.
I struggled with the "how" at first with Angular as well. Then one day it dawned on me: "It is STILL javascript". There are a bunch of examples on the ins-and-outs of Angular (one of my favorites along with the book https://github.com/angular-app/angular-app). The biggest thing to remember is to load in the js files just like you would in any other project. All you have to do is make sure the different pages reference the correct Angular object (controller, view, etc.) and you are off and running. I hope this makes sense, but the answer was so simple I overlooked it.
Maybe my experience will be useful to someone. We split our project logically. One SPA we use for feed, another one to work with the map, another one for editing a user profile and etc. For example we have three apps: feed, user and map. I use it in the separated urls, like this:
https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/
Each of these applications has it's own local routing mappings between states in the application.
I think it is a good practice because each application work only with its own context and load dependencies that it really need. Also, it's practice very good for debug and integration processes.
Indeed, you can very easily make a mix of SPA apps, for example the feed will be url with the angularjs application, the user app with the reactjs and map to the backbone.js application.
In response to your question:
Angular not just for SPAs, Angular play good and fast for SPA applications, but no one bothers to build MPA application of a variety of SPA applications. But thinking about your url architecture don`t forget about SEO availability of your applications.
I also support the idea:
What’s the difference between a project and an app? An app is a Web
application that does something – e.g., a Weblog system, a database of
public records or a simple poll app. A project is a collection of
configuration and apps for a particular website. A project can contain
multiple apps. An app can be in multiple projects.
If all you need is a few pages with client databinding, I'd go with Knockout and Javascript Namespacing.
Knockout is great, especially if you need uncomplicated backward compatibility and have fairly straight forward pages. If you're using 3rd party components, Knockout's custom bindings are straightforward and easy to work with.
Javascript namespacing allows you to keep your code separate and manageable.
var myCo = myCo || {};
myCo.page = {
init: function(){ ... },
...
}
And in a script tag after your other scripts are loaded
<script>
myCo.init();
</script>
The key is, you use whatever tool you want for when you need it. Need databinding? Knockout (or whatever you like). Need routing? sammy.js (or whatever you like).
Client code can be as simple or complicated as you want it. I tried integrating Angular into a very complicated site with an existing proprietary framework, and it was a nightmare. Angular is great if you're starting fresh, but it has a learning curve and locks you into a very tight workflow. If you don't follow it, your code can get really tangled really fast.
I'd say Angular is overkill if you're just looking to develop a SPA. Sure, if you're already comfortable developing with it, go ahead. But if you're new to the framework and only need to develop a SPA, I'd go with something more simple with a number of its own perks. I recommend looking into Vue.js or Aurelia.io.
Vue.js uses two-way data binding, MVVM, reusable components, simple and quick to pickup, less code to write, etc. It combines some of the best features of Angular and React.
Aurelia.io, in all honesty, I don't know much about. But I've peeked around and it seems an alternative worth looking into, similar to the above.
Links:
https://vuejs.org/
http://aurelia.io/

Categories

Resources