Disoriented when writing JavaScript - Architectural Integration - Grockage - javascript

I'm a reasonably experience programmer (10+ years), and have only hacked JavaScript. I don't feel comfortable writing more than a few lines of it, but I'm seeing it more and more unavoidable to learn properly.
I get the same feeling writing JavaScript as I first did writing Unix shell scripts. I didn't fully understand the environment, where things are going, and so forth. It took a few well-timed suggestions to sort it all out.
I have a hard time with Js tools. I'm okay with almost any text editor, but is there anything other than alert('foo') and Firefox error console to see what the heck is going on?
Ps. I have bought books. Yes, I can write code snippits, but nothing sufficiently explained the whole paradigm. It's all code snippits, with no larger picture of how to integrate it architecturally with server side scripts, and not have to duplicate everything on the server side.
Maybe that's the answer. . write some on the server side?
edit:
tl;dr AMA OO PHP programmer. how do I quickly and completely grok javascript/jquery?

This article might be helpful to you: Organizing A jQuery Application. It dissects a non-trivial jQuery application and explains how to architect a whole JavaScript application (as opposed to code snippets). You can download the code there, and sing along.

Learn to use the console tab of Firebug, including breakpoints. It's a simple and powerful way to see what's actually going on in your scripts.
Firebug also gives you a JS command line to work with, which is a great way to experiment with short snippets and see what they do.
http://getfirebug.com/javascript

Related

really struggling to find the next path to develop my javascript knowledge

I have completed codeacademy twice, freecodecamp twice and read a few online articles...I believe I now have a good understanding of the fundamentals of Javascript.
However, I feel lost in terms of where to go next. People say build projects, but where do I start? How do I plan? Even though I know the fundamentals of Javascript, I still feel there is a lot to learn. I feel like I will only truly start understanding Javascript once I start putting projects together but I cant think of any.
Also, codeacademy, freecodecamp and these other online course websites dont seem to really teach DOM manipulation. Is there any online coding sites, similar to the ones mentioned, which will allow me to practice DOM manipulation?
I would be hufely grateful if people who have developed their understanding in Javascript can give me some advice based on how they did it.
I am just sitting here staring at my laptop and going back and forth. I cant really seem to figure out what to do next, now that I have gained a basic understanding of the core concepts of Javascript. Please guys, help!
This is not a very good question, but I still would like to try and explain.
Questions you need to ask yourself
Frontend or backend js?
I assume frontend based on the "DOM manipulation" part, but there is also Node.js for the backend with it's own unique API to use and interact with the operating system.
Do I want to use libraries and/or frameworks
Depending on your needs and preferences you will come in touch with these things, they all have their own learning curve, on top of learning js. Libraries are mostly just function in order to help you. However frameworks like Vue and Angular require a way of writing your code that is like it's own language. (opinionated)
What version(s) of js and browsers do you want to support?
Javascript has evolved over time and the javascript engines in browsers as well. Older IE browsers will be harder to support without the help of a library like jQuery.
Now about the learning part and where you can practice.
There are probably thousands of great sites to practice, however I will give you my favorites.
The stackoverflow documentation on javascript (top navigation on this page)
I will get hate for this: W3Schools
To read the docs on Mozilla
interactive on both codeschool and codeacademy
JSFiddle for practicing in a closed environment
https://bento.io/topic/javascript
https://learnxinyminutes.com/docs/javascript/
http://www.allitebooks.com/ for specific ebooks
Have a look at what frameworks are popular nowadays and why. If they suit your needs. Learn them one or two at a time but not more, so you won't mix them all up in the end. Try to at least understand OOP in javascript even if you don't intend to use it later. Anyone feel free to expand this answer because it is hard to cover it all myself.

Generating modern js-based rich client from server side?

I am working on a intra-net project, which uses javascript for client side effects/widgets, like tree, grid, dragging. We are thinking about to use jquery/backbone plus some jquery ui.
The problem is, with great flexibility of jquery/backbone, our low experienced developers are almost certained to make code MESSY. And I hate that.
To reduce the chance they can make code messy, I am going to build a server-side program to parse xml (those developer will write xml instead of javascript when possible) and generate javascript at runtime. By doing this, I can force restriction on the xml. And xml tends to be less messy.
But before jumping into that, I want to ask is there any similar existing framework? Preferably the javascript generated also make use of model/view/controller pattern.
Or what else can I do to prevent the project from being messy?
ps: I want to educate the developer. But that is a long term job. Not really helpful for current project.
Thank you guys/girls.
Alright, a terrible idea I think. So besides training my developers (for long term), what else can I do? Especially in short term because the project is rolling on?
I like your goal but I think that trying to enforce coding standards in a programmatic way is over-solutionising the problem. The following steps help to steer you in the right direction though:
Use a version control system such as SVN or Git. Not only does this allow you to pinpoint who is messing up your code and educate them, but it gives you the option to roll back changes that completely break your project. It shouldn't be seen as a "blaming" mechanism, but is certainly a reliable way to identify the culprit. You may also find that your developers are less likely to commit code that isn't up to scratch after they realise their work is open to such scrutiny.
Documentation - and I don't necessarily mean having a 300 page wiki on how your project is organised and how functions should be written. But even something as simple as commenting every function will often encourage others to do the same. The important thing is that the developer sees the standard of work they are expected to deliver in your work. Developers with potential will take their cues from you.
Paired programming - get into the habit of sitting with your developers while they code. Not 100% of the time, but often enough that you are aware of their strengths and weaknesses. Teach them the way you want them to code.
If all else fails, resort to tools that help developers with their standards, such as the Resharper plugin for Visual Studio. While this is primarily designed for C# usage, it also provides code hints etc. for Javascript that will help inexperienced developers adopt a set of practices that should improve the readability of their code.
I don't think there is any substitute for a good tutor, and providing any sort of automated solution is likely to cause a lot of headaches for you without ever really improving the skills of those you are hoping to teach.

Jquery source obfuscator [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Javascript library: to obfuscate or not to obfuscate - that is the question
Hi, I'm creating a very simple footer zone with a jquery animated drawer and a simple carouseel with a modal to show some products of my store.
Any decent jquery programmer will easily top this, i'm a noob, the problem is that I know my competition very well, the moment they lay eyes on this they will implement the same, I just don't want them to outragely rip off my hard earned code.
I found this javascript obfuscator online:http://www.javascriptobfuscator.com/default.aspx
is it any good?
My question is, although it "obfuscates" the code, its still pretty easy to just donwload the .js file with my code and implement it. Is there a way to make the javascript file not load/work if its not in my domain?
This + the code obfuscation would work really well don't you think? Can you point me out something like this or a simple alternative?
Thanks
Best Regards
Joricam
One thing to think about. I can simply take your obfuscated/hard to read code and plop it right on my site and boom, it works. This is not like obfuscating PHP code where it requires a tool to decode it, and run. I can take your code as is, and it works fine.
However, if you insist:
I would just use any decent javascript minimizer to make your code harder to read. Not only will this improve the load time of the script, but also make your code harder to read.
I highly suggest something like YUI compressor or Google Closure
Note that I am stating, make it harder to read. Don't bank on this obfuscation idea, as you will not find any good solutions. It is not worth your time.
My question is, although it "obfuscates" the code, its still pretty easy to just donwload the .js file with my code and implement it. Is there a way to make the javascript file not load/work if its not in my domain?
No. There is no technique that is going to prevent a determined competitor from reverse engineering your JavaScript code.
For what you're describing - a drawer and carousel - they likely wouldn't even bother. Plenty of free, open source jQuery plugins that do that are out there. If anything, you're probably reinventing the wheel anyways.
If you don't want your code to be seen, I suggest placing it all on the server. JavaScript, by design is meant to be client-side, so regardless of what you do, people will still be able to utilize the code one way or another. If you still want to hide the code as best you can, try using Google Closure Compiler.
I'm on board with the sentiment expressed by others on this thread: You're wasting your time; what you're trying to protect has very little value and is hard to protect.
To answer your question, however:
Use flash or silverlight or some other such technology and put all of your code server side.

javascript/jQuery code generator

I'm wondering if there is a tool out there that does any javascript code generation. I'm asking because the team I'm on are not web developers. They are VB6 developers.
We are looking at a AJAX, JavaScript/jQuery, JSON, webservices model and was wondering if there were any tools that would provide the basics for JavaScript templates (i.e. jQuery AJAX calls)? Obviously a tool like this, might make the change from VB6 to JavaScript a little easier. It also seems like Code Generation is a buzz word so I thought there might be something for JavaScript.
If not, do you think this would be a good tool to work on (for the basics, as they would have to edit and modify to fit the need of the page)? Or do you think it is a waste of time?
Personally I think this is a complete waste of time. Spend a little time to teach your developers javascript or go another route. Endless time will be wasted tracking down bugs by blindly copying and pasting template data all over the place.
If you feel comfortable in the Java world then you can use as well. So you can code in Java and have the code be generated to Javascript etc.
From the GWT SDK documentation:
The GWT SDK provides a core set of Java APIs and libraries that allow you to productively build user interfaces and logic for the browser client. You then compile that source code to JavaScript. All that runs in the end is plain ol' JavaScript in the browser. Oh, and you can mix in and interoperate with JavaScript in your source code as well.
I recently had a similar thought and found this https://learning.divi.space/jquery-function-generator/
It is a Jquery function generator.

Is it possible to hide or scramble/obfuscate the javascript code of a webpage?

I understand that client side code must be readable from the browser but I wonder (since there are too many things that I ignore) if there are ways to obfuscate to code to the end user and, if not what is the best practice to "pack" the javascript code.
It is good practice to minify your JS with a tool such as YUI Compressor. I would not obfuscate it unless you have a specific need to do this. There are plenty of online obfuscators such as this one
See this article: http://developer.yahoo.net/blog/archives/2007/07/high_performanc_8.html
Check this out.
Other than min'ing it, I don't think you can really hide js. It all goes the user's browser and there are plenty of ways of seeing it once its there.
See here for a Free Javascript Obfuscator.
Given that it is in fact possible, if the reason you intend to obfuscate is to protect intellectual property, you are probably trying to derive value from your work the wrong way. It's fairly easy to reverse the obfuscation, and you would probably be wasting time maintaining your code.
Focus more on what services you intend to provide to those who visit your site as a means to differentiate your site from competitors
There are tools that could be used to compress javascript code and render it difficult for the end user to understand.
Is there a reason why this won't do the trick for you?
http://www.javascriptobfuscator.com/
Do not put any sensitive or personal information in javascript.
Spend your time on keeping your data on the server secure.
Step 1: Don't.
You would have to do a lot to achieve any meaningful level of obfuscation. Obfuscating the names alone is not enough, since all of the standard functions will still be there (although they may be buried in a layer of shorter/obfuscated aliases), and deriving the purpose of a particular function is easy once the code is formatted nicely again. Anybody who really wants to know what your JS code does can, and will, no matter what you do to it before their browser gets a copy of it.
If you truly have valuable business processes in your JavaScript, then you're Doing It Wrong(tm).
No obfuscation is going to keep your code truly secure and it might just give you the false illusion of security (cf. security by obscurity).
If you do need to keep some portion of your code secret, consider pulling the sensitive portions into a server side script and making (say) AJAX calls to the script. Especially with the advent of JSON, communicating with server-side scripts has never been easier.
It is possible to use following tools:
YUI Compressor - requires Java - very good compressor
Packer - creates the most confusing, and smallest code, but scripts don't run as fast as YUI - this can be used online though. Select 'Base62 encode' for maximum effect.
The Dojo Compressor I've never used this one, but it's on the top-list. It also requires Java.
JSMIN By Douglas Crockford, this one has a very simple algorythm, but it is still good. Meant to be used in combination with JSLint.

Categories

Resources