1

I am relatively new to HTML/JS and am very much an amateur programmer. I have created a web app that works but I can't help but feel that the code is a spaghetti mess! I have been looking for JS/HTML best practices but nothing really answers my questions (I'm sure it exists online but I am perhaps not seeing if it applies in my case!).

I started programming in C and am used to writing a set of functions that carry out a task but not sure this is suited to JS/HTML as I have done it.

So, to my questions - suppose I have a function:

function GetFixtureData(group){
 // #1. Query the server
 query.find().then(function(results){
 // #2. Manipulate the data in some way.
 var datatoshow = results.map(...)
 // #3. Show data to user by creating a HTML table
 CreateHTMLTable(datatoshow);
});

This function grabs data, manipulates it and then updates the user view. I feel sure this is a poorly structured way of doing it. Is it best practice to split this type of function - if so, how?

Also, I am using semantic ui which requires me to initialise elements such as dropdowns, modals, etc. Should I have all this in a UI init() function? But then, for example, when the dropdown changes it calls GetFixtureData().

$('#ddGroup').dropdown({
 onChange: function (value, text, $choice) {
      GetFixtureData();
 }
});

In essence, I am confused as to whether all this should be in module and whether UI/HTML related code should be kept separated from the data retrieval and manipulation.

4

The code structure will vary from project to project. There is no one right way to do things in JavaScript (and web development in general), and the overall organization and structure will depend on (1) the framework/library one would use, (2) the specificity of a given project or (3) the personal preferences of a developer.

For beginner projects, you have a choice. You can:

  • Use an existent framework, such as AngularJS or React.

    The benefit is that it will force you to organize your project in a very specific way, and while you could make choices when you gain enough experience, you can also avoid making any structure choice when you're a beginner, and follow the default structure of the framework.

    The drawback is that additionally to the complexities of the technologies and protocols used in web development, you add the complexity of the framework itself. Personally, I think the complexity of frameworks with a rigid structure, such as Angular, are too overwhelming for a person who is new to web development.

  • Work from scratch, but pick a popular architecture or pattern, such as MVC.

    The benefit, once again, is that you're pretty sure that the architectural choices which were made for you are probably the good ones—better than what somebody without deep knowledge of web architecture could make.

    The drawback is that you have to grasp those architectures/patterns, and clearly understand how they should be applied in a context of web development.

  • Go from scratch, work in iterations, produce something which works, and see where it all ends.

    If you do that, don't expect to have a production-ready application. Instead, prepare to throw it away several times, and restart all the process once you learn enough to understand where you made structural mistakes which cannot be easily refactored.

Through the learning process, make sure:

  • You check the open source projects to see how they were built.

  • You learn not only languages, but also everything else related to web development. Knowing JavaScript is one thing, but you also need to know HTTP, or how browsers render the page, or what makes mobile devices special in terms of bandwidth usage and power consumption when accessing a web application.

I started programming in C and am used to writing a set of functions that carry out a task but not sure this is suited to JS/HTML as I have done it.

Similarly to C, JavaScript has functions, and you use those functions to abstract implementation and avoid code duplication. Additionally, JavaScript has prototypes and, since ECMAScript 2015, classes (although fundamentally, classes remain prototypes in JavaScript, unlike other object-oriented languages). Learn object-oriented programming; this is an important skill for a web developer.

Another important concept is functional programming. JavaScript uses several functional paradigms, and many problems which result in not so readable procedural code could be expressed much better in its functional form. Learning functional programming is very important, both for your JavaScript skills and to improve your code and your reasoning in general, independently of the language of your choice.

I feel sure this is a poorly structured way of doing it.

Your piece of code looks fine to me. However, one needs to look at the larger project to have a good understanding of the quality of the code.

Don't hesitate, by the way, to submit larger pieces of code to CodeReview.SE. People from there would be glad to help you, telling which things could be improved.

1

It is always good to keep your code separate according to MVC(Model-view-controller). If you develop any app by using MVC manner, in future it will be very easy to manage/maintain. Also it will be very easy to debug and resolve bug.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.