Lost in .js - Computer Technical Help - Software and Hardware Forum

Two Plus Two Forums Other Topics Computer and Technical Help

Lost in .js

Post Reply Subscribe

...

06-20-2013 , 06:30 PM

Addict_x

newbie

Join Date: Mar 2007 Posts: 43

I'm trying to learn web and mobile app dev with js. On the mobile side I'm using titanium. I've got 4 semesters of c++ and have done some c#. Everyone says js is easy to learn but I'm lost in a sea of frameworks and what the hell is gonna make up my "stack." We got backbone.js, commonJs, node.js, jquery, etc. etc.

I want to build a simple golf score card app, preferably mobile. At first, I jumped right into titanium (which I know is a whole different discussion) and got lost trying to create my program b/c I just don't know js well enough to implement an OOD like in c++/c#. So, I tried going back to basic js...

Sorry for the rant... I'm also having a hard time with the gui aspect of the app and linking everything together. I'm so used to creating console apps in c++ or dragging/dropping/doubleclicking in c#...

So, does anyone have any advice or resources? I know there are a boatload of resources and that is part of my problem as it's hard to maintain focus. If someone has experience with titanium, I would love to hear from you.

Quote

06-20-2013 , 07:04 PM

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

I gave someone else general advice the other day, here's a link to the post.
http://forumserver.twoplustwo.com/sh...38&postcount=8

If you decide to go with Angular you can almost drag/drop components because a lot of people have made custom "directives" are typical web related UI elements. You can't visually drag them but you can at least get the code that you can drop in to get some type of functional UI element.

To go from being new to JS to getting used to everything is a long process but if it's what you want to do it's worth it. You can use Grunt to help you create a work flow.

If you've done some GUI work in c# you likely know more than you think with JS. The systems are kind of similar. Both are event based.

You might have a button in c# and when you click it maybe it changes the titlebar of the app. To do that you write some code in the button's event handler for the click event.

In Javascript you pretty much do the same thing, except instead of drag/dropping components visually you just use components/directives (if you're using Angular) or copy/paste snippets of code that you've either written previously or someone else wrote and then write the code to change the web page's contents.

Quote

06-21-2013 , 01:53 AM

Grue

Pooh-Bah

Join Date: Mar 2004 Posts: 5,667

^^ can't really agree with this. If you want to learn how the web works, start with learning HTML and CSS and then just go to jQuery, don't mess around with "vanilla.js" (the dom) or any other js libraries, just learn how to interact with the way the web works with jQuery. Dealing with things like Grunt or Angular is a big mistake to un experienced people imo.

Quote

06-21-2013 , 11:01 AM

Addict_x

newbie

Join Date: Mar 2007 Posts: 43

Quote:

Originally Posted by Grue

I know HTML/CSS well enough to build a basic UI. I'm more interested in writing the logic part of the app. I want to be able to interact with the front-end and back-end.

So, let's take my golf scorecard app as an example. Let's just assume the app is a browser based web app with the following functionality (bit of a brainstorm here):

Game set up:
* The user can enter up to 4 players and their info (name) which can be stored locally/remotely
* The user can enter course info (course name, location, hole info, etc) which can be stored locally and/or remotely, let's do both.

Game play:
* keep track of the scores

Game exit:
* names, scores and course info are all written to something

Knowing this, what is your game plan for development? In C++/C# this is immediately clear to me. I know what my IDE is, I generally know what classes I will have and where my app logic will be and written. AND, let's restrict discussion to JavaScript only. It seems that if/when I move on to Ruby/Python or whatever, I should have a js under my belt.

Quote

06-21-2013 , 01:41 PM

Grue

Pooh-Bah

Join Date: Mar 2004 Posts: 5,667

Use javascript (again, I would just use jQuery) to send and get JSON information from the front end via AJAX POST and GET. For example here's something I just did that's show give you a starting point at least (copy/paste):

Code:

var Xhr = function (type, path, data, complete) {
		this.xhr = new XMLHttpRequest();
		this.xhr.open(type, path, true);
		this.xhr.onreadystatechange = complete;
		this.xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
		this.xhr.send(data);
	};

	document.getElementById('retrieve-button').addEventListener('click', function () {
		var filterdata = "filter=" + document.getElementById('type-filter').value;
		var retrieveResults = new Xhr('post', '../scripts/get-data.php', filterdata, function () {
			if (retrieveResults.xhr.readyState === 4 && retrieveResults.xhr.status === 200) {
				var json = JSON.parse(retrieveResults.xhr.responseText);
				populateTable(json);
				fadeIn(document.getElementsByTagName('table')[0], 500, 'table');
			}
		});
	});

This is without jQuery obviously which is much more concise. And beginners should probably not start with the constructor function I used etc.

All you need to do is learn how to do that and you should probably do some client side validation via regex as well.

While you can use "html5 local storage" to store data on the client side I would recommend against doing that for this sort of thing.

Last edited by Grue; 06-21-2013 at 01:47 PM.

Quote

06-21-2013 , 06:55 PM

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

It's weird you would tell him not to use Angular to build an application given his background and goal but you want him to use jquery instead? Have fun writing a million lines of glue code and dom manipulation code when wiring up the UI.

What he wants done given the above post would be like 30-50 lines of javascript in Angular from start to finish with very little mental overhead and would be extremely modular/flexible when it comes to adding in future features or changing the UI.

How about you write the jquery version of his app and I'll write the Angular version. Then we can compare them afterwards and judge the code on:

- Readability
- Reusability of components
- Ease of maintenance (adding new features or changing stuff)
- Lines written to handle the app's logic vs lines written to glue it all together

Quote

06-21-2013 , 07:20 PM

Grue

Pooh-Bah

Join Date: Mar 2004 Posts: 5,667

I guess I read it as he wants to "learn javascript" not just crank out one app, in the later you're definitely right.

Quote

06-21-2013 , 09:42 PM

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

How is using jquery going to make him learn JS though? Especially when he's confused about tying together a GUI for the app which is rightfully so because there's at least 10 or so libs/frameworks to choose one and each one comes with a fairly high learning curve.

Most people who use jquery to design any app end up just putting together a bunch of spaghetti that's impossible to maintain and most of the code you write is trying to keep the state of the data and the dom in sync. That is why backbone, angular, ember, knockout and the 32424 other frameworks exist, each of them solving the problem in a different way.

If anything he should read blog posts/guides/books on JS design patterns to get more familiar with the language and its capabilities.

Quote

06-21-2013 , 10:44 PM

Grue

Pooh-Bah

Join Date: Mar 2004 Posts: 5,667

The dude doesn't get the web. He has no idea about even relatively simple things like AJAX. Having him jump into a random MV* framework (half of which more or less require jQuery by the way) is foolhardy if his goals are beyond just getting an app out the door.

Again I'm not some jQuery monkey that mindlessly pimps it. But most of jQuery is just a wrapper for the DOM anyways. Having at least general knowledge of how the DOM works and what its capable of is essential to understanding "javascript". And maybe writing so called spaghetti jQuery isn't the best optimized code but at least he's writing it! As opposed to just letting Angular "drag and drop" it for him.

Quote

06-22-2013 , 03:28 PM

#10

RICHI8

adept

Join Date: Mar 2006 Posts: 1,108

Yeah I'm with Grue on this. Stay away from the hyped up JS frameworks until you understand JS itself. I wouldn't advocate jumping into jQuery either though. I'd say implement some of the basic features of jQuery yourself as well some of the underlying principles of the thick client frameworks (Event brokers, Observer pattern, Mediator objects, etc.).

It should be noted that I make the above recommendation on the basis that you are trying to learn JS and not just crank out an application as fast as possible.

Quote

Post Reply Subscribe

...