LabVIEW Web Development Discussions

cancel
Showing results for 
Search instead for 
Did you mean: 

web dev tools

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?

0 Kudos
Message 1 of 32
(11,857 Views)

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.

Tanner B.
Systems R&D Engineer - Aerospace, Defense, and Government
National Instruments
0 Kudos
Message 2 of 32
(6,856 Views)

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

0 Kudos
Message 3 of 32
(6,856 Views)

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

0 Kudos
Message 4 of 32
(6,856 Views)

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.

Kirk L. | Applications Engineer | National Instruments
0 Kudos
Message 5 of 32
(6,856 Views)

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?

0 Kudos
Message 6 of 32
(6,856 Views)

Hey roodrood,

You are right in that on modern websites it is ideal to combine and minify JavaScript to reduce the number of network requests which can help improve page load times. However, large JavaScript applications should not be written as single large files. You can write JavaScript code in multiple files and use tools to help combine and minify those files for you.

JavaScript ES 5.1 (the version of JavaScript running in all modern browsers) does not include a module format for breaking JavaScript into multiple files. However, the JavaScript community has largely settled on the AMD module format for breaking up multiple JavaScript files for use in web browsers. I would recommend looking into using AMD modules to breakup and organize your code and using a tool such as UglifyJS to combine and minify the modules for your final deployments.

The next big version of JavaScript (ES 6) will include it's own module format, but we are several years away from the browsers supporting ES 6 and the ES 6 modules pattern shares a lot of similarities with the AMD module pattern anyway.

As you have seen there are many design patterns available to software engineers and JavaScript is capable of using many of them just like most other programming languages. The book available online called Essential JS Design Patterns provides a good introduction and some examples that are very followable for a lot of different JavaScript patterns. There are patterns used commonly throughout code such as the Constructor, Module, and Revealing Module patterns as well as application wide architecture patterns such as MVC and MVVM, etc.

Knowledge of the common design patterns (constructor, modules, etc) helps a lot when reading existing JavaScript code but it can be a little difficult to maintain the larger MV* architectures yourself. This has lead to the popularity of projects like AngularJS, etc that implement the MVC patterns and give a lot of guidance and structure for designing large JavaScript applications. Learning one of these frameworks such as AngularJS, etc, is a large undertaking but gives you access to a large community of existing code. At the same time it may be overkill depending on your application.

I do agree that there is a lot of information and misinformation available online for JavaScript development and this is largely because there isn't one controlling owner of JavaScript but instead it is an open language with many different contributors and multiple implementations. That doesn't help a whole lot, but there are good resources available:

  • The required bare minimum for JavaScript development: JavaScript: The Good Parts
    • Some key points are that JavaScript uses function scope and not block scope. This means you should declare all variables used in a function at the start of the function; it does NOT mean you make all variables global.
    • Another key point. USE A LINTING TOOL. The development environment Brackets enables jslint by default which is excellent for new users because it is very strict and enforces good JavaScript programming habits. If you are using another environment, make sure to include linting as part of your development workflow.
  • For the comprehensive in-depth view of JavaScript ES 5.1: Speaking JavaScript
  • A really good and short article for understanding JavaScript scope: Everything you wanted to know about JavaScript scope

Milan
Message 7 of 32
(6,856 Views)

Thank you very much Milan, this is very helpful. These are great resources for me to look at

0 Kudos
Message 8 of 32
(6,856 Views)

Just to point it out - Aptana is based on Eclipse and is specific to web development.  Eclipse is a general purpose IDE that, like Netbeans, grew out of the Java community.  The reality is, you don't really need an IDE for web development.  You will want something that can enforce indentation and likely provides some coloring to distinguish the bits and pieces of your code (pretty printing), but all of your debugging will likely be contained within the browser environment so you won't need a lot of the support that a traditional IDE provides.

0 Kudos
Message 9 of 32
(6,855 Views)

Nice post, Milan.  However, I would take exception to the comment that the JS community has settled on AMD as the de facto method for modularization.  AngularJS has one of the largest user bases of all of the MV* frameworks and it does not use AngularJS.  Besides, I am not sure this actually addresses the issue of loading multiple JS files.  AMD just works as the C include or the python import statements might work.  It will load scripts on demand.  So, if you have a page that requires a bunch of scripts, it will still have to load those scripts. I think what you want here is a method for file concatenation.  For this, you will likely want to use a build system like gulp or grunt.  Check out this talk comparing some of the build systems. 

Cheers, Matt

Message 10 of 32
(6,856 Views)