web dev tools

[roodrood]

Hi,

I am new to web debelopment. I have learned the basics of html5, css and javascript and labview web services. I have made some simple web apps (UI) and got some interaction going with LabVIEW. I am using Brackets for web development and have also tried aptana. I was wondering what the best IDE is for web development and if using tools like dreamweaver or visual studio is encouraged for web development. right now I have to write code for every button or control that I need for my UI (web app) and i find that very frustrating, specially coming from LabVIEW where a lot of controls and indicators are ready at your disposal. I was wondering if such tools are available for web development? I was also wondering if there are tips and guides for beginner web developers in terms of project/file management, styles, architecture, UI development and such?

[Tanner!]

Roodrood,

     Unfortunately, that's the trade-off. As far as good IDEs, I really like Brackets.io.

     If you're looking for some tips and tricks to speed things up and make the process go faster:

I really like Bootstrap. It provides a solid framework for your webpage and has a lot of good-looking controls and indicators that you can use. It also uses a grid system, meaning that I can set the relative position and it will be responsive.

I also use d3js for custom visualizations and graphs, but there is a steep learning curve. Google Charts is neat, but it requires an internet connection.

It can be tricky to create, but once you've got some control or indicator I like, I'll wrap it in a closure or function in my js file so I can call it repeatedly with a few parameters rather than creating something from scratch every time. So if I have a graph that gets updated from a  LVWS URL I'll create a div tag for that chart, and then some js function like LVWSGraph("div_name", "lvws_url") that I can now call to create and attach my data source.

[roodrood]

Thank you Tanner, This is very helpful. I will look into Bootstrap.

[cirrusio]

I will second Tanner's recommendation of Bootstrap.  As to chargint - there are a ton of charting libraries out there aside from D3 such as flot, NVD3 (an easier to use subset of D3), canvas.... You will just have to figure out what works best for you.

Regarding development environments - there are a ton available for free or with a commercial license.  I have been using Aptana but am probably moving over to Atom.  I like the minimal web server that is built into Aptana as well as the support for version control.  As for Atom, I like the idea of going with a more stripped down text editor that has strong language support.  I have built my own local web server for testing my apps in python so I don't really need the one built into Aptana.

Developing for the web is a tricky process and will require some significant investment of time to learn the tools.  Make sure that you have some kind of web development tools available in your browser for debugging (in Chrome you have 'Developer tools').  Without these, you are just kind of hacking.

Also, once you have the basics of Javascript down, consider looking at some kind of framework for developing your application.  In data acquisition, you are likely going to want to contain most of your information on a single page.  For larger applications, you will want to use some kind of MVC framework that allows you to develop single page applications (SPA).  I use AngularJS for which there is a humongous community that is very supportive, but there are a ton of other good ones such as backbone, ember, etc, etc...

Hope this helps.

Matt

[TheCaptain]

Roodrood,

If you're looking for a framework to build your web dev projects on, I'll go ahead and second everyone's Bootstrap recommendation--simple grid layout with easy CSS hooks. As for actual IDE, I prefer lighter IDEs like Eclipse; Dreamweaver will generate a lot of HTML for you but it will also create a fair bit of garbage code.

[roodrood]

So I have started working on a new web app project and came across another issue. It seems like minimizing the number of scripts attached to an html page is recommanded to increase page loading time.

This way you have to do as much as you can in one script which is the exact opposite of normal programming where you try to have more specialized scripts for modulairty and clarification.

It also makes it dificult to decalre variables, most people recommand decalring variables at the begining of your javascript, now as your script gets larger (because you are doing everything in one script) it becomes very tedious to declare variables!

I have been reading javascript best practices and style guides and i have found it a little disorganized compared to other programming languages. are there any methods for managing large projects/scripts to make them more managebale and modularized? right now I make a fiolder called _css and one called _js and put one text file in each (styles.css and script.js) and that is it (ignoring images and other resources needed for the page)! Is this a typical setup for a web app project?

I have spent a lot of time learning about design architectures in LabVIEW (state machine, consumer/producer and mora dvanced hybrid ones) and was wondering if there are such methods available for JS? or do you just go line by line and add event handlers and functions? it seems very disorganized and chaotic this way?