I am writing some code in Processing that makes use of multiple classes. When I put them in one single JavaScript file, it is getting really long. It would be great if I could separate each class into their own file and import them in somehow.
I have tried putting the objects in their own files and tried bringing them in with script tags that look something like this:
<script type="application/processing" src="object1.js"></script>
<script type="application/processing" src="object2.js"></script>
<script type="application/processing" src="main.js"></script>
However, my main.js file does not seem to recognize the class definitions from my other 2 files. I am writing pure Processing code to put into a web environment.
Is there something wrong with what I am doing or is this something that Processing does not support? Thank you in advance for your help!
From the Processing.js docs, emphasis mine:
Create a web page that includes Processing.js as well as a with info about where to get your sketch file (you can specify multiple *.pde files, separating them with spaces):
<script src="processing-1.3.6.min.js"></script>
<canvas data-processing-sources="hello-web.pde"></canvas>
So you'd probably want something like this:
<canvas data-processing-sources="object1.pde object2.pde main.pde"></canvas>
Googling "Processing.js multiple pde files" also returns a bunch of results, including this GitHub issue.
Another approach would be to use the Processing editor and split your project up into multiple tabs. You'd have to use an old version though, since Processing.js is no longer supported in the latest version.
That brings us to the point I mentioned in your last question: Processing.js is old and not being actively developed. If you're developing Processing sketches for the web, and you're comfortable with JavaScript, then you should really be using P5.js. Otherwise you're going to be fighting with a library that's no longer maintained.
Related
I am trying to follow the practice of compiling all my javascript files and js plugins etc into one single javascript file, which then gets included into my website. So far I have been using gulp with npm for this purpose, but I am really struggling when it comes to the point that the libraries I want to include don't work like that. For example Google Maps API. So, how can I deal with such cases ? I have been asking around and I hear that there is not a way to "include" a javascript file like you can include a php file, but is this the final answer ?
I know you can include other files with jQuery on runtime, but that way you are not avoiding the additional http calls, remember the ideal case is to call one javascript file which has all the js code you need.
Even when I am using require in javascript, the required file must have a proper format and I have to assign it to a variable bla bla bla, but when I include a script like this <script type="text/javascript" src="myjsfile.js"></script> everything is included in my scope properly.
How can I work around this ? Would it be a good practice if a javascript compiler like gulp copied the contents of all my javascript source files and pasted them into one single merged file ? Wouldn't that work the same way as calling all those files with ?
Well, I started this question because I am having troubles with the google maps api, but the problem is more general, so if you can help me please answer the above questions too. Anyway in the google maps api case, I am working with it perfectly fine when I include it like this
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=Mycallback">
</script>
But how can I merge this into my minified way of including libraries ? I tried to use some npm libraries that integrate with google maps api (like this for example), but I am getting CORS problems and I think this is an expected behaviour.
Thanks in advance ! Sorry if something sounds stupid, I am trying to learn the good way of coding.
Decent question.
I'm not an expert but there is my subquestion/answer:
async attribute lets load html and script(s) simultaneously. If map is main feature of site, I would place <script> on top of loading html file so its not always rule to place in to the bottom of <body>.
I am new to javascript and programming in general. I have been working on a web app that solves simple algebraic equations. I am using two libraries, algebra.js and katex.js. How do I use both libraries in my script? I would like to keep this as a client-side application.
I have looked at node.js but my understanding is that node is for server-side development. I have looked at RequireJS but that doesn't seem to handle directories well. Recently I found Enderjs which seems to use npm and allow for client-side development and still make use of require().
What should I use to make a web app like this? Please let me know if there is anymore information that is needed.
The most basic way to do this is to include multiple script tags at the top of your html file. So:
<head>
<script src="path/to/library1.js"></script>
<script src="path/to/library2.js"></script>
<script src="path/to/my/javascript.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
This will load more than one onto the page. The order might matter - be wary of which dependencies your chosen libraries have. For example, some will depend on jQuery, so you should load jQuery first then those that depend on it. Order is top down.
In my example, if we pretend library2 depends on library1, then the example would work. However if library1 depended on library2, it would not.
The simplest way is to include the script tags directly in your html file like so (this assumes that you have the algebra.js file in the same folder as your html file):
<script src="algebra.js"></script>
If you are loading the library from the internet you have to use the full web path in the src attribute, for example loading the jQuery library from a cdn (content distribution network):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I'm wondering if I can use CoffeeScript to include other standard JS files (as a simple way to do some combining of files).
I have a client-side minification tool I'm using (an app called Live Reload) which is working just fine.
<!-- Some jQuery plugins I'm using. -->
<script src="/js/libs/some-plugin.js"></script>
<script src="/js/libs/another-plugin.js"></script>
<!-- The output of my /js/script.coffee file: -->
<script src="/js/script.js"></script>
What I'd like to do, is just combine those plugins into output of my coffeescript file. I've looked high and low and I've only seen articles on server methods for this as well as a lot of articles on things like requirejs.org. I'm not trying to do anything that complex- I just want to get rid of a couple round trips for js files I know I'm never going to touch.
Does CoffeeScript have an "include" function to speak of?
There are ways you can achieve this by creating a more complex Cakefile, in which you will read the contents of js-files and append them with CS compiler output than write it into the single target js file. You can even create a fake global require function which will mimic its behaviour in the bundled file.
If you were looking for a standard tool or at least an approach to that problem, unfortunately, since CS is very young, there's none yet. There are some attempts though: https://github.com/jashkenas/coffeescript/wiki/%5BIntegrations%5D-Build-Tools.
I'm currently working on such a tool myself and am planning to publish it within a month. I'll post back then.
Basically, the answer seems to be no. This is not something CoffeeScript is capable of.
What are peoples thoughts on the best way to organize dependencies in javascript? I know the basics but have some more specific questions. From reading Douglas Crockford and other posts around here, I know to put script tags as late in the body as possible,use minifying, combining all the client-side code into one .js file where applicable, etc.
What is the best way to use libraries though? Say for instance you do the following:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="somelib.min.js"></script>
<script type="text/javascript" src="myappcode.min.js"></script>
Could this be considered too many script tags? Say that myappcode.min.js is dependent on but also modifies certain parts of somelib.min.js -- should you just combine those into one file?
Also is it possible or even a good idea to reference one .js file such as a library inside another .js file, as opposed to just putting one script tag before another in order to reference it in the latter? Coming from a C# background I know that JavaScript is parsed sequentially as opposed to starting in a main() method and proceeding -- so I am guessing the script approach is pretty standard, but wanted to make sure.
You can merge those JavaScript tags into a single tag while still being able to keep all the JS library files separate if you write a JavaScript handler. Check the code for the JS handler in the UC Mobile Web Framework for an example of how you might do this.
It depends on the person looking at it. I don't think 3 script tags is bad, although it's known that reducing the number of HTTP requests improves a websites loading speed (as it decreases the overhead of each individual request).
I would not merge files just for the sake of merging them in my development project. When uploading to a production server however, I'd merge the files together to reduce the number of script tags necessary as you shouldn't care about readablity/etc in a production environment.
I'm trying to load a single javascript in pieces by calling the javascript from external separate files, and was wondering the best way to go about doing this. Specifically, this is a just a basic google maps page, and I want to organize the code a little better. I'm hoping to split the marker variables up into groups and store those groups of variables in separate files, then call those files within the main javascript header of the page. I want to restrict this code to just html and javascript to maintan its simplicity for the purpose of future updates by individuals less than knowledgeable in this area. I don't do a whole lot of coding with JavaScript so, if there already is a built-in function for this, that would be great. This is purely aesthetic, just to make the code a little cleaner. Any help or suggestions would be appreciated. Thanks.
If I understand you right, you don't want to call one JavaScript files from several another JavaScript files. You want just save some groups of variables. Well, you can save it - with a server-side database or, may be, with http://www.w3.org/TR/webstorage/ or http://www.w3.org/TR/IndexedDB/
You can add references to external files:
<html>
<head>
<script type="text/javascript" src="colorGradient.js"></script>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="kml2.js"></script>
<style type="text/css"> ... </script>
</head>
<body>
....
</body>
</html>
You can try a "feature loading" and/or "on-demand javascript loading" framework. Since you're trying to use Google maps, I would recommend you use the Google Loader API which works very closely to what you're seeking.
for example: With a simply JS you can do the following....
<script type="text/javascript">
google.load("search", "1");
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>
... and it will load the multiple files.
Splitting up you code for your development is a good idea. There for, there are a lot of frameworks to help you organize your code with the help of MVC and psudo MVC models.
Try:
http://maccman.github.com/spine/
or
http://documentcloud.github.com/backbone/
But what prevents you from having everything in one file on the production environment?
Its easier on the server requests. And you want to integrate this in your build process anyway...
But if you insist in on adding them to the DOM you can do this of course:
document.write(unescape('%3Cscript src="yourfile.js"%3E%3C/script%3E'))
this will add
<script src="yourfile.js"></script>
to your dom
If I understand your question correctly, you would like to split up a single script into multiple .js files. As far as I know, this should work fine as long as you include a tag to load each file. You may need to load the files in order (i.e. don't include a file that calls a function that has not been difeined yet).
However, be aware that splitting up your script will result in more calls to the server, which will slow down page load. In most cases, just including a few scripts won't even make a noticible difference in load time.