I'm migrating from server side development (java, php) to client side - HTML, CSS, javascript.
Though I technically understand (mostly) how javascript works, I have not found a good guide to creating an application - particularly with regards to how to organise functions and objects and setting up a solid test framework for them.
I'm currently half way through the Ruby on Rails tutorial
http://ruby.railstutorial.org/
which is excellent - I now feel confident in understanding the standard structure for arranging all the code in an application, and setup good testing practices as I go.
Plus, the integration with heroku and git make for a really tangible real world example, making for a complete understanding of how to develop and deploy a rails app.
Can anyone recommend a similar kind of guide for JS/AJAX development?
One good way to write JavaScript is to do it in a modular fashion. For dependency loading, you would also need module loaders like RequireJS. As for structure, there are a lots of frameworks out there, I suggest you give BackboneJS a try. You would also want to make your JS scalable so that you won't ever have to worry about expanding. Here's more videos about it as well.
There are a lot of frameworks to choose in JS. Test them all out and create a stack which you feel comfortable playing with.
I don't think you'll find a similar tutorial as on Ruby on Rails about Javascript, because Rails is a framework and Javascript is just a language that has hundreds of different frameworks built around it. I don't know what kind of applications are you willing to develop, but Backbone.js is an MVC framework for frontend development and you could search some tutorials on it.
However, if you're just starting out with JS, you probably want to learn first on the basics of JS. Good source for that is for ex. MDN JS guide:
https://developer.mozilla.org/en/JavaScript/Guide
Then you might want to check out guide on JS design patterns for learning how to structure your code:
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#designpatternsjavascript
Hope these will help!
Related
I come from a decade of experience with Java EE, SE and Java with Spring. If there's something that was drilled in me by myself and other fellow developers, was how to make use of design patterns, separation of responsibility, separating definition from implementation, interface segregation, etc. Also, we were always worried about testable code (unit testing and integration tests).
When I was learning Java, there wasn't a single book, magazine or website that didn't implemented things with those rules in mind, to the point of boredom. So we always new how things should be done from an architectural point of view when starting new stuff or maintaining code. With time, projects like Spring Boot and JBoss Seams started to give out of the box a basic project layout witch you simply followed to success(or at least you should...).
Now that I delve deep in Node.js, I miss that so much. There seems to be only a handful of people on the web worried about it and trying to teach newcomers how to write good backend code with Node.js.
People teach you how to boot express and put all of your code (database, logging, mailing, error handling and so on) inside an express route.
Of course, when I started learning Java, there was nothing preventing you from using Servlets directly with some JDBC code thrown inside, or even worse, Scriptlet inside JSPs...
I would appreciate so much to know how you for instance implement a service layer, where do you put your business logic? Do you put it in classes or functions that returns other functions? How to write easily testable code by Mocha for instance... Do I really need a controller layer, or can I trust my routes to cover that responsibility?
I'm interested in JavaScript only on the Backend, using Express.js, Socket.io, RabbitMQ, Passport.js, and GraphQL(in the future). Not interested in any rendering engine or template engines, much less JavaScript on the Browser. I'm already very proficient with Sequelizer and Mongoose.
I know the feeling of switching from Java Spring Boot to the Node.js stack. It was confusing for me in the beginning aswell, but with time you find your set of frameworks you like.
I'm probably not qualified enough to answer your entire question, but I can give you some advice of what framework helped me the most after starting with Node.js.
For me, this framework is NestJS.
It's a progressive Node.js framework to build scalable server-sided applications, based on Express.js. It supports a lot of different design patterns, but I personally use a pattern consisting of controllers, services, repositories and providers. You can use multiple different databases obviously.
Nest.js stands out for me, because you don't need any 3rd-party tutorial or documentation, because their own documentation is done really well and has basically all the information you'll ever need. It is really expandable with additional dependencies (most of them are in-house developed and have great documentation aswell).
What also has to be mentioned, is that as a Java-dev you will probably miss OOP if you switch to JavaScript. In Nest.js tough you only develop with TypeScript and overall it gives you a feeling very similar to Java Spring Boot.
I built a quiz taker app with Ruby on Rails, using the MVC framework. I want to do basically the same thing with pure JavaScript, and add more features with jQuery for mobile devices and special effects, since jQuery is just awesome like that.
I have looked around on sites like TodoMVC for comparisons on frameworks, but I'm foreign to how these frameworks function. Why do they use Collection rather than Controller in their MVC definition? It seems to me that these are just client-side frameworks. Would I use something like Backbone.js for client-side work and Node.js for server-side?
I'm just unsure as to how development with pure JavaScript functions. I need to create a database to store quiz and user information and be able to access that database when viewing most pages, so I feel the MVC framework is the best way to go.
Any suggestions as to where to start?
Wow, that's quite a broad post; let's take things one at a time
Why do they use Collection rather than Controller in their MVC definition?
The exact answer varies by library, but a simplistic answer is that the Controllers in most Javascript apps doesn't really need any framework; they can be raw Javascript and work just fine as they're usually not very complex.
Furthermore, parts what you might consider to be "the Controller" are often provided separately. The primary example of this is Backbone's Router object: it is similar to the implied routing (and routes.rb) in Rails, or the urls.py in Django. Just as those frameworks don't consider routing to be part of "the Controller", Backbone (and similar frameworks) provide routing as a separate piece ... even though it could fall under the C in MVC.
Similarly, much of the DOM manipulation functionality that jQuery provides would normally belong in the Controller of an MVC app, so in a sense jQuery helps you build your controllers; it's just not explicit the way Backbone.Model helps you build your models.
Would I use something like Backbone.js for client-side work and Node.js for server-side?
That's really apples and oranges; to put in server-side terms, Backbone is more like Rails, and Node is more like Ruby (or Mongrel or something). So yeah one's client-side and the other's server-side, but the differences are deeper than that.
Any suggestions as to where to start?
Pick a framework and get your hands dirty! Seriously, you can spend hours reading reviews of the different frameworks, and still be no closer to making a decision at the end than when you started (I speak from experience). But if you just pick one and try it, you'll likely find that it either "gels" with you or doesn't pretty fast.
Personally, I'd recommend starting with Backbone just because A) it's very popular these days, and B) I'm biased: I use it on a daily basis and love it. Also, it probably would fit you well because it was created by the CoffeeScript guy (and CoffeeScript was his attempt to make Javascript more Ruby-like). However, Ember.js is also very popular these days, and Hector mentioned ExpressJS, which I know nothing about but could be cool.
But the point is, pick one, do a hello world, or maybe something a little more complex like an introductory tutorial (Backbone has one around a To Do app). A few hours of coding with it will tell you far more than I (or anyone else on Stack Overflow) ever could about whether it's right for you.
If you are looking for a JavaScript MVC-like framework take a look at Express.js http://expressjs.com
Express.js is more like Sinatra than Rails, but it will give you a good foundation on the server side.
I would definitely look at Google Closure. I have started to use it with LimeJs on a personnal pet project and really got caught with it's compiler and it's modular design.
It's not really MVC, but since JavaScript should be thought more in an asynchronous fashion, I tend to think more of it as event driven than simply a request-pipeline-response way.
So, Closure Library and jQuery / jQuery UI (both on Google API) for the client side and ExpressJs for the server side. Also, take a look at this framework comparison chart, you might find it interesting.
I'm currently on a web application project written in javascript with node.js and Express server-side and it's time to consider the client-side of this application. The two questions are:
Should I consider using a framework or can I write it without such a tool?
And if not, which framework?
I've chosen three of these: backbone, knockout and Ember. I read all the questions I found about them but I'm still hesitating. The points to consider are:
It is good to mix html with javascript like knockout does?
Will my application be easily maintainable?
Will the framework continue and not diappear tomorrow, leaving me in a very uncomfortable situation?
EDIT: And what do you think about JavaScriptMVC?
As #Christian Varga has said in the comments, it depends. However, I would make the following observations:
It is good to mix html with javascript like knockout does?
With knockout you are not forced to mix javascript into the html. See Unobstrusive Event Handling.
Will my application be easily maintainable?
In my experience with knockout , if the application gets especially large the pages do get complicated. However, if you are going for a SPA style page then the code will always get fairly involved. I haven't worked with Ember or Backbone but certainly Backbone does have a reputation for being be good for larger applications.
Will the framework continue and not diappear tomorrow, leaving me in a
very uncomfortable situation?
I think you have picked your three frameworks to consider wisely. Knockout and Backbone both have fairly wide adoption. Knockout is to be shipped with MVC4 which gives you some confidence behind its future. Ember is newer but there seems to be a lot of excitement behind it. There is a good discussion of Ember with various references to knockout and backbone here
Hope this helps you evaluate what will be best for your project.
All those are good frameworks. You can choose anyone and you won't make a huge mistake. Of course, you might like one most than others, but that's a matter of taste. All those frameworks will make your app easy mantainable.
Now, I want to add something more. You asked "Should I consider using a framework"? You can build your own stuff, that's something cool. I'd just recomend to keep in mind good organization of your project. In my short experience, Js is a mess. And these FWs help you to keep your code clean and organized.
1 more thing to add to organization: You should consider some AMD tool, like Require.js
If you're thinking of building an application with scalability and maintainability in mind you might want to consider a reference architecture such as Boilerplatejs.
BoilerplateJS incorporates best practices to be used when building a large scale application. Furthermore it ships with libraries such as knockoutjs and also utilities that would help structure and organize your code.
I'm looking to modernize my web development with some cool libraries, but there are so many tools that do different things, often with overlap, that it is hard to decide.
I'm not interested in one framework but more in a combination of various tools that work well together. I've looked at resets and normalizers, boilerplates, HTML frameworks, and grid framework, CSS authoring frameworks, CSS frameworks, Javascript frameworks, DOM manipulation, AJAX, resource-loading, feature detection and UI libraries, Javascript toolkits, server-side pre-processors and client-side pre-processors, and framework generators; It's beautiful chaos.
Also I'm looking forward to using SASS and Coffeescript or something similar so a combo including those would be nice.
Update:
I've decided on JQuery for DOM manipulation and I would also appreciate some kind of kickstarter/bootstrapper.
Depends for what. Use what you know best!
However, here are a few recommendations...
The Feather-Weights
For quick, no frills and no overthinking development, I'd recommend:
Underscore for general JavaScript Development
BackBone for client/server communication (using jQuery or Zepto.js for AJAX calls) and designing your models and event buses
Jasmine for JS testing
SASS for cooler CSS
HTML Frameworks, what's that? :)
CoffeeScript is indeed great, if you want to go down that road. If you are interested in CoffeeScript, you may want to look at Google's Dart as well, but it's fairly recent.
The Heavy-Weights (Batteries Included)
If you're building a rather complex web-application (speaking more along the lines of thousands of lines of code here), you need to take it up a notch and in that case I'd recommend you look at:
The Dojo Toolkit
Sencha's ExtJS
The whole Google Closure Tools stack
Dojo and Closure can be integrated in complex build systems and their compilers will allow for a good modularization of your codebase while keeping it easy to produce a strongly optimized deliverable. They also both contain their own module loading system, so you won't need additional libraries like Require.JS, and will only load the parts you explictly tell them too if you use a custom build. But be warned, they're definitely more hands-on and have a steeper learning curve.
The Google Closure Tools are definitely very comprehensive and are as batteries included as it gets, but they do not necessarily make development easy for you: they give you the power, but you need to know what you are doing.
Bootstrappers / Kickstarters
Some solutions offer to "kickstart" your project and to prepackage for you a collection of some of the above tools, sometimes offering you some customization, so you can easily get started and don't need to maintain your own kickstarter up to date with new versions:
Bootstrap
Foundation
HTML5Boilerplate
Kickstart
Skeleton
WARNING: I haven't really tried these kickstarters extensively myself.
Obviously, the answer here depends greatly on what you're building. If you're really getting into front-end engineering and making single-page web apps, I'd recommend reading Addy Osmani's blog. Recently, he's been blogging and giving a lot of talks about javascript MVC/MVP/MVVM systems, as well as scaling javascript apps.
If you want a laundry list, read this article where he gives his ideal stack:
Backbone.js for lightweight MV*
Require.js + AMD + RequireJS text add-on (to assist with external template management)
Backbone.js LayoutManager (if you require some more intelligent layout management)
jQuery for DOM manip.
Handlebars.js for templating, unless you're doing something simple, in which case, opt for Underscore's Micro-templating
r.js for handling script optimization
Jasmine + Jenkins for testing and CI
Node.js + Express (speaking of Node, Miller Medeiros has an excellent write-up on how to use it as a build script)
MongoDB as a noSQL data-store
This is surprisingly close to what I use myself and I can attest to the quality of these libraries and this as a whole-stack solution.
jQuery for JavaScript. Many great UI plugins for UI controls in addition to the code jQuery API that hides the browser differences in the DOM.
Angular JS - Awesome. MVC Framework, great for quick SPA's
jQuery - DOM manipulation - good for effects (fading, toggling etc.)
Don't rely on it too much though.
Angular JS, jQuery - Some argue they work well together.
Backbone.js
Ember.js
React.js - Uses JSX, not JS, but pretty much the same thing
<script type='text/jsx'>
//JSX
</script>
I'm working on a Java EE project right now, using lots of javascript function, but only using jQuery library.
I would like to know if anybody has some experience with this, used a Javascript framework with Java before, and tell me what would be the best way to do it, and best tool to do it.
Also, part of requirements are that I want to use the Framework to make it easy to handle the events, and to define a state machine for the website. I was looking a sproutcore, but couldn't find any information on how to use it inside a Java EE project.
For pure frontend compilation, there are several options, darioo mentioned Google Web Toolkit, though this is all very low level and thus harder to roll into out of the box. There are several GUI frameworks out there based on GWT.
Ext GWT
Smart GWT
Vaadin
Out of those three I hear our Java devs are most happy with Vaadin, though it's quite hard to create really customized (your average funky website with never before seen features...) frontend apps with these frameworks and you will long back for the expressive freedom JS toolkits like jQuery have to offer in a lot less code.
Then there are hybrids (JSP based), allowing more freedom in you frontend files (aka. frontend developers can tinker with it without knowing Java). Java code doesn't compile JS, but offers out of the box solutions you can tinker with in the JSPs.
JSF2 (uses YUI)
Spring Roo (uses Dojo JS framework)
Spring Roo scaffolds an entire frontend provides/uses the Dojo framework. JSF2 was/is looking nice as well according to our Java devs, though wwhen looking at the website, the angst of Oracle seeps in.
Both Dojo and YUI are quite expansive and mature JS frameworks specialised for large JS projects. Whereas jQuery is nicer for smaller JS projects with a rather flat architecture.
Ignoring Java based solutions, you can always fall back to YUI, Dojo or even MooTools for more architecture options.
You can also stick with jQuery, but imo. you need to be happily insane and masochistic (aka. frontend/JS developer) to maintain large scale JS/Html/CSS projects. jQuery is a nice toolkit, but as a framework, it offers meager architectural/structural solutions, you will have to devise them yourself by mixing and matching it with other small toolkits like RequireJS.
My best advice would be, build your app without JS first, using page refreshes and whatnot. Then apply a JS layer and build Ajax services for that layer. That way, your views and JS solution are losely coupled and theoretically, you can always switch frameworks without touching your JSP's too much.
If you already know Java, Google Web Toolkit is the most Javascript centric framework out there that I'm aware of.
Note: it's not just another Javascript library like jQuery, but a full blown framework with set rules you must adhere to. By writing Java code, it will generate Javascript for you that's highly optimized for speed, size and multiple browser compatibility.