I've inherited responsibility for a moderately complex Rails app, which has meant learning Ruby and Rails besides trying to understand a lot of code that I did not write myself. The project also contains a non-trivial Backbone.js app written in Coffeescript. Since I will be the sole developer on this project for a long time, and since I don't know Coffeescript, I plan to move the entire source code to straight Javascript.
I would like to know what the best approach to doing this would be. Compiling to javascript is easy enough, but there is a lot of refactoring to do to make the code look "normal".
Cleaning up cruft by replacing stuff like
var a;
a = 1;
with
var a = 1;
is simple enough, or perhaps not even worth bothering with. I am more worried about the overall structure of the project. Coffeescript produces files that begin like this Backbone view code:
(function() {
var extend = function(child, parent) {
for (var key in parent) {
if (hasProp.call(parent, key)) child[key] = parent[key];
} function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype; return child;
},
hasProp = {}.hasOwnProperty;
App.Views.MyClass = (function(superClass) {
extend(MyClass, superClass);
function MyClass() {
return MyClass.__super__.constructor.apply(this, arguments);
}
# rest of the code here...
});
}).call(this);
I would just like to know what a sane approach to dealing with this would be, and I haven't found any kind of "best practices" for doing what I would like to do.
What would be best: just check everything into git and keep going? Use the Backbone/Underscore version of extend instead of redefining the same function at the top of every file? Use a different method entirely for stringing together all of the separate files?
Just looking for a general direction. I'll figure out the details.
You could try using a tool like decaffeinate if you are ok with using ES6.
Otherwise, if you are sure you want to port to Javascript, then you'd be better rewriting by hand, than trying to fix the generated code.
Start by recreating the files one at a time, writing unit tests as you go. Not only will this help you better understand the project, but you'll also learn Coffeescript (and probably some good techniques as you go).
If you read the overview on the Coffeescript website, it provides a translation table for going between the two languages. Every time you come across syntax you don't understand, see what it generates when you enter it into js2.coffee. There's another good reference for migrating from Coffeescript to ES6 here.
You will end up spending more time and much more effort (not to mention most likely introduce bugs trying to replicate things like super or sub-classes in CoffeeScript). Instead of trying to rewrite a working CoffeeScript web app, just dig in and soak up the CoffeeScript as you go along and find the need to change things. Stop resisting! CoffeeScript is well documented and has proven itself as a very useful language to know. Learn it, its only scary because its new!
Related
I have ad idea to make some REST application. I already selected what I will use on server side.
But now I have a big big deal, what i should use to make RICH web app ?
I have middle javascript knowledges. I know jquery, I did my own jquery plugin. it should tell you about my level, so far from pro level.
But i would like to try make it by my self. And i'm thinking that jQuery it's not good choice for this kind of task. I would like to have something more flexible, and not looks like a lot of callback for specific events. Something maybe in MVC style.. But i don't want to spend a lot of hour to lear complicated stuff.
For example: ini PHP life there are a lot of frameworks, I choose Yii, it's really more easier to understand and make something, than Symfony (even 2nd version) for instance.
So i'm looking something similar Yii (but for a browser side), something fast, easy to learn, flexible and powerfull.
I thought maybe it could be cofeescript, or cappuccino or something else ...
BUT I don't have so much time to learn and try so many JS frameworks and libraries to make decision by my self, this is why i'm asking you all.
Thanks.
Typically my choice would be:
jQuery - for general stuff
Q promises library for handling of more
complicated asynchronous operations
Backbone for building model on the
client side
Mustache templates for interaction with HTML
Jasmine - for unit testing of the application
However if you plan to make very rich user interface, you need to handle many various events and you don't want to write your own visual controls (since they are complicated) you can go with ExtJS (note the potencial need to buy licence).
For me Jquery ui has always been easy to use with my limited javascript knowledge .The learning curve wasn't steep at all and lots of community plugins helped in the further development as well .
Apart from that you can try Mootools , Extjs (very nice components but requires a bit learning ) and yui (definite learning required for me ) .
I would recommend using jQuery because you already have some knowledge about it. When it comes jQuery UI it offers some functionality: http://jqueryui.com/demos/. Is this functionality RICH enough?
On top of jQuery, you can use several JS libraries to fullfil specific needs:
Charts:
http://www.highcharts.com/
Grid:
http://www.activewidgets.com/
When you are using JS it's really important that you keep your own JS code in good order. Devide your functionality into separate js-files. Think about your object structure. JS is prototypal language (you can inherit directly from other objects).
For me it took some time to find out the way to write good JS code. I highly recommend this book: JavaScript: The Good Parts (by Douglas Crockford).
// Namespace
var MyNameSpace = {};
MyNameSpace.vehicle = function() {
var that = {};
var my = my || {};
my.thisIsMyOwn;
that.publicFunction = function() {
my.thisIsMyOwn = "put something here";
};
return that;
};
MyNameSpace.car = function() {
var that = MyNameSpace.vehicle(); // "inheritance"
return that;
};
Working with Eclipse for Javascript, Ctrl-click seems to work on some objects but will not take me outside of the current javascript file. Is there any way to get this "go to definition" to work more fully? I use Eclipse for Java and depend on this functionality, would like to see it work better in Javascript as I'm just trying to learn Javascript.
I think it probably doesn't work because of the many ways in JavaScript to define something..
function foo() {}
var foo = function() {};
window.foo = function() {};
window['foo'] = function() {};
var z = 'foobar'; window[z.substr(0, 3)] = function() {};
Especially the last one would be - even though it's unlikely to be ever used in real code - pretty much impossible to be detected by an IDE without executing the whole code and then tracking where a global is defined for the first time.
Another example would be with libraries implementing a class system. Without knowing the details of every library it's pretty hard to find out what class names they define.
Intellij Idea support that functionality. I was looking to see if Eclipse has a plugin and came across your post, I use to work with Intellij Idea and I have that functionality that is very helpful so to the user that is saying that is impossible for a IDEA please take a look in Intellij Idea you will be surprise of all the functionality that you can find.
I have some experience with JavaScript - but mainly with some small stuff, I never did anything really big in Javascript previously.
Right now, however, I'm doing quite a large javascript-related project, a jquery-powered frontend that communicates with the server-side backend by sending/receiving JSON via Ajax.
I'm wondering if you could provide some useful information on how to deal with large javascript projects - are there any helpful tools/libaries/good practices?
Thanks in advance.
My one big tip would modularize
In JavaScript, it is very easy for variables to clobber other variables. In order to avoid this, modularization is a must. There are several ways to take advantage of JavaScripts scope rules to minimize the possibility of variable conflicts.
var myProject = {};
myProject.form = function(p_name, p_method, p_action)
{
var name = p_name,
method = p_method,
action = p_action;
var addInput = function(p_input)
{
// etc...
}
return {
addInput: addInput,
name: name
};
}
myProject.input = function(p_name, p_type, p_value)
{
var name, method, value;
var setValue = function(p_value)
{
value = p_value;
return true;
}
return {
setValue: setValue,
name: name
};
}
// etc...
If you're careful about using var, and keep track of your function scope, then you have only one global variable - myProject.
In order to get a new form Object, you'd simply do the following: var myForm = myProject.form('form1', 'post', 'post.php').
You may want to check out Backbone.js
Backbone supplies structure to
JavaScript-heavy applications by
providing models with key-value
binding and custom events, collections
with a rich API of enumerable
functions, views with declarative
event handling, and connects it all to
your existing application over a
RESTful JSON interface.
Grigory ,
Even i moved from a backend to UI few months back only follow this approach
read all the concepts of jquery
either from google or through some
book or through jquery
documentation.
follow some of the jquery best practices http://psdcollector.blogspot.com/2010/03/77-best-jquery-tips-i-have-ever-read.html
write utitlity functions for all repeated code like getcookie ,subsstrings etc etc
keep getting your code reviewed by experienced person who can guide you
post to stackoverflow if you get stuck anywhere.
as it is big project divide into mutiple files and use proper naming convintion.
please let me know if you need anything else
jQuery and YUI 3: A Tale of Two JavaScript Libraries is a nice comparison of them in the context of a complex application, and gives useful hints for jQuery programmers as well.
The best advice is to keep your code segmented in different files as "classes". I personally hate working in a file that's more than a few hundred lines long.
Then assemble and minify your code with one of the tools on the web, like Shrinksafe or Google Closure Compiler
Note that Dojo, YUI, and Ext are all designed to handle large Ajax applications. You'll struggle a bit with jQuery. But I'm guessing this app isn't all that big and you should be fine.
Have you consider checking out MooTools?
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
Calling the javascript gurus out there.
Basically my question is regarding how you structure your code, both visually and for functionality for example do you wrap everything in objects using this structure:
var myapp={
binds:function(){
//put some event listeners for jquery etc...
},
otherfunc:function(){
//do some other thing
},
init:function(){
//call myapp.binds and other functions and other stuff to intialize your app.
}
};
Then finally
$(document).ready(myapp.init);
The thing is with a structure like this I think JSLint complains doesn't it? Whats the pros and cons using a structure like this or is there a generally better way to structure your code? Do you follow a certain pattern from $(document).ready(call) to putting all your event listeners and "initializing" your app, do you use separate objects for methods and variables?
I also think "visually" if you have a very large webapp this structure eventually looks very messy, but maybe it's just me I don't know, any input is appreciated thanks.
Using Inheritance Patterns to Organize Large jQuery Applications
explain in detail and with better practice by Alex
http://alexsexton.com/?p=51
its very very well explain, must see
other links
How To Manage Large jQuery Apps 5 months ago
It doesn't matter much how you structure your code as long as you follow the essentials rules of programming that your teacher thought you:
Don't write repetitive code
A function must do 1 and only 1 thing
Document your code
Some other small things but mostly the above... oh and apply lots of common sense
The only error you get from that is "implied global." You can get rid of the warning for document by using this.document instead (since window is the context). The implied global for $ will stay unless you paste in the jQuery source (then gl with all the errors in that).
I trust JSLint--a lot. On big projects I tend to make object literals as you did above but I use a module pattern for object security:
var myapp = (function () {
var secret_stuff, public_stuff;
return {
stuff: public_stuff
}
}());
I'm working on a project where we are doing a lot of custom javascript and especially jquery, on an mvc style project.
The only problem is that I keep adding more and more global functions/variables and they are piling up. I've got a few files but I'm unsure how to split some of the stuff up into separate files.
I've thought about composing some of these function and global variables into objects, but the object syntax in javascript seems a little awkward to me (because of the absence of classic classes). Though if I had a good example to follow maybe I could come around.
How do you deal with a project where the global javascript functions and variables start piling up like this?
A very simple way to pile a bunch of global variables and functions into a single global object:
// Awful pile of globally-scoped names
var foo = 1
var bar = 2
function go = function(){
console.log('Yeehaw!');
}
// Instead, just dump everything into a global-level object
var MyApp = {
foo: 1,
bar: 2,
go: function(){
console.log('Yeehaw!');
}
}
// Now access stuff like this
console.log(MyApp.foo);
console.log(MyApp.bar);
MyApp.go();
For "simple" top-level variables and functions, I can recommend this. There are plenty of improvements that can be made to this, but they'll probably fall under the category of premature optimizations; this is a great first step.
The Crockford Videos on YUI theater are a good example of how to set up JavaScript namespaces among other things.
You could break them up similarly to what jquery.ui does... by categories or by action/control
ex:
effects.blind.js
effects.bounce.js
ui.accordion.js
Can they be broken up into the Controls that they deal with?
Or by what they do?
Just some suggestions...
If you are working with jQuery, the first way to organize your code is to build jquery plugins:
http://docs.jquery.com/Plugins/Authoring
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
As you mentioned mvc, there is various javascript implementations out there, but I'm not sure they are hugely popular: jamal, javascript mvc,
http://jamal-mvc.com
http://javascriptmvc.com