If you decide to make an interactive site with a functional UI, you will have to create software logic for your frontend anyway.
This language is necessary for every progressive developer, let's look at how CodeLobster copes with JS, Node and modern frameworks.
In this case, we made a simple HTML page with a moving object. Next, you will learn how to create and debug a script in the programming environment.
To enter the code quicker, use the hot keys, press Ctrl + Space and select the desired function from the list.In the browser environment, we have a large set of APIs at our disposal, the work will go much faster if there is documentation at hand.
The IDE has a convenient help system so that you always get up-to-date information on the programming languages you work with and do not waste time searching the Internet.
Links to the official documentation are chosen automatically and are located on the right panel of the program in the "Dynamic Help" tab.
You can also instantly get a tooltip for any function, HTML-element or CSS-property, just hover the mouse pointer over it.
Note that you no longer need the setInterval() or setTimeout() functions to play the animation, this is already a passed stage. Use requestAnimationFrame(), so you will get excellent performance in all types of modern browsers.
Inspecting Scripts with the Built-in Debugger
This is the easiest and fastest approach, it is suitable for checking small scripts. The disadvantage is the fact that you get the data after the program has already completed its work.
If you are developing a complex application, you need much more control over the script execution process.
Built-in debugger allows you to pause the program at any stage of execution and assess the state of variables and the environment.
To start, set a breakpoint, this is the place in the script from which you want to start debugging.
You can put one or more breakpoints by clicking the mouse to the left of the column with line numbers in the editor.
After that, press the F5 key to start the process or click on the "Live view" tab at the bottom of the program window.
The application will be opened in the default browser window and script execution will be suspended on the first breakpoint.You can now move sequentially through each line of code by pressing the F11 key. And pressing the F5 key again, you can immediately jump to the next breakpoint.
To see the current value of any variable, hover the pointer over its name. But it is better to use the special tabs on the bottom panel of the IDE, so you get more information in a convenient table view.
In this case we are interested in the following tabs:
- Call Stack - here you can view the call stack and trace the sequence of function calls;
- Locals - it allows you to instantly evaluate the state of all variables available in the current script execution context;
- Watch - the so-called "watch list", here you can put your preferred variables, the values of which you want to control. Adding to list is done using the context menu, click on the variable name and select "Add Watch".
To complete the debugging process, press Shift + F5, you can also delete the breakpoints by performing a mouse click again.
CodeLobster constantly makes sure that your code is correct in terms of syntax and it highlights lines with errors in the editor.
Node.js Support for Server-side Programming
In the browser we mostly manipulate the DOM and work with the provided API. We always operate in an isolated environment.
At the same time, Node.js provides full access to computer files and system functions through its own modules.
WEB-specialist can create a mini-site or SPA (Single Page Application) and with the help of familiar technologies immediately write a small backend to test this new WEB-application.
In CodeLobster, Node is as easy to work with as other libraries. Autocompletion and hints help you to type faster, follow the usual asynchronous style, and focus on the logic of the program.
We also have support for specialized frameworks for creating SPA and developing dynamic user interfaces: AngularJS, ReactJS, BackboneJS, EmberJS, MeteorJS and VueJS.Any of the supported libraries can be downloaded from the main menu of the program in the "Plugins" section.
Select the desired item and click "Download Framework", the IDE will download and add the current version of the framework to the project.
It became more like the usual object-oriented languages, complex programs with broad functionality became easier to create and maintain.
Now it's possible to write clean, concise, easy-to-read code and JS is really more programmer friendly.
With the CodeLobster IDE tools, you can create both distributed client-server applications and mobile or desktop applications for major operating systems such as Android, iOS, Linux, Mac OS and Windows.
WEB-specialists found themselves in privileged conditions, now they are fully ready to develop absolutely any type of software.
Read More Articles