I am creating a web page using html,css and js and I am not following any framework so I have only page (that was the requirement). So I have lot of javascript in my page and I want to move my javascript to another script file. So I have two quesions:
1) What's the best way to do that?
2) Is there any way to call my functions as a property like we can do with node_modules.
var printMsg = require('printModule');
printMsg.print();
or in jquery ($.whatever())
The currently best way to organize your project is through using Webpack. It's allow you to module your js code easily and they a have plugins for almost everything. Take a look at their guide as knowing webpack will make your life easier. Using their guide, It might take you 5-6 hours depend on your dedication.
That's ES6 and knowing webpack will solve like 99% of your problems.
Here's my webpack-simple-template. You can take a look at how I set thing up.
Related
Whatever I do I'm unable to go to definition between functions defined in different *.js and index.html files.
I'm not even sure if is it supposed to work? Or is this feature working only if I do some node.js developemnt using some imports? (I'm new to javascript, I just wan't to make webpage with WebGL, not some server-side stuff)
I tried to read this but I don't see how is it relevant for me? I just made empty jsconfig.json which did not helped
https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson
https://code.visualstudio.com/docs/introvideos/quicktour
https://code.visualstudio.com/docs/languages/jsconfig
See simple example search for THREE.Screen call from index.html which is defined in ThreeJS_aux.js.
My javascript project is here
https://github.com/ProkopHapala/LearnWeb
did you tried adding a tsconfig.json file and set allowJs: true checkJs: true ? This way vscode will start a tsserver and you will have all its features / refactors. Remember that JavaScript IS TypeScript so you don't have to use anything strange just good old JavaScript. Typescript compiler supports that refactor and many others (or you could develop / install third party plugins with more). And if you want to start using Types,you could still do that using plain old JavaScript with jsdocs. My two cents. More info: https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
From the way you have your code laid out I would assume that you're going with a walkthrough or some kind of tutorial. Meaning, instead of splitting your JS into a separate file you're embedding it within the actual script tag in the HTML. Not a common practice is all unless someone is trying to maximize the development area, like a tutorial/walkthrough.
I think what you're really looking for here is design patterns. There is really no short answer to give you. There is also no single way to accomplish this. These design patterns are what puts JS together in a more readable fashion.
Try reading through this online book on design patterns Learning JS Design Patterns
This is a quick summary of your common design patterns AMD, commonJS, and Require. I recommend going through the book to get a more in depth understanding. Relation between CommonJS, AMD and RequireJS?
How to organize Vue-JS project [files and directory]: Non Javascript way?
Coming from a non-javascript background, I found Vue.js very intuitive and easy to use. My earlier experience in Javascript is with JQuery and vanilla javascript on the browser.
I created an application using Vue , Vue-components and vue router. Everything works fine.
My problem is, I have ended up writing a lot of code in a single index.html file of my project. This file contains over 10 templates that I have created and attached to different component in my app. I want to know that is there a non-javascript way to organize these templates in seperate files.
I see that there are options using webpack and browserify to modularize the project. But coming from non javascript background, I don't find them intuitive. I don't want to go node - npm way because that has its own learning curve and moreover it downloads a dozen of files and dependencies in my project which I don't understand. I am old school and more comfortable downloading the files and including them in the webpages.
So probably, you understand where I am going to. I need a solution where I could put my templates as separate files and read those files in the different components.
What I have tried :
Declaring the templates inside my components. But writing all that html inside the component is not that clean. It also, makes my JS file too huge. I am better in putting all data in the index.html instead.
Storing template as smaller chunk "homepage.html","about.html" and in my components, using $.get / $.load to read different components in ready function of the component. This works but I still have to fire an additional ajax call for each component which is not efficient.
Please refrain from suggesting the obvious node-npm [webpack and browserify] way. I know thats what is supported by Vue but this needs a learning curve and complete setup. Answer to this question would actually help other developers who hesitate going the node-npm way.
Please shout back if you need more clarifications to the question.
The options you've mentioned are your only real ones... the HTML of the template needs to be available when it's needed, so you either have to have it within your html file off the bat, or load it using AJAX or an in-browser loader like RequireJS (and this extension that allows it to load HTML https://github.com/requirejs/text).
In-file templates make sense for very small projects. As your project grows, you'll need to start using the tools that are built for this. NPM rocks and every JS package that you'll ever need can be included in your project in seconds.
I highly encourage you to try the Vue CLI
It does use node, npm, webpack and downloads dozens of files. Which you've you've explicitly asked for not to use, so let me clarify:
The Vue CLI takes care of the complexity and configures webpack for you.
You don't even have to know it's using webpack.
It's very developer friendly (it even has a built-in gui) and lowers the barrier to entry compared configuring a webpack config.
I hope you'll also find it "intuitive and easy to use".
I'm working on a team of developers that keeps reference directives in various files for intellisense purposes. As you can imagine, it's impossible to maintain these files. As such, I'd like to know if there's a way to dynamically generate them. Any way. At all. No matter how kooky.
Here's a reference to the kind of thing I'm talking about: http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx#ReferenceDirectives
I'm trying to do this on the fly. Say, to dynamically make some references for every js file in a folder. Whatever. Anything. I'll run with it once I get a good starting point.
Why not use T4 to read all the files in the current folder and below? (accounting for, if necessary scripts that are not actually included in the project but present in the file system).
Or even better and more likely related to what you are trying to do?
Use the nice centralized _references.js VS helper for scripts that are core in functionality to the others that you are editing.
What is the best way to import and use JavaScript code in HTML pages? I am considering two options:
Have single <script> tag with all.js file that is imported to HTML files, that uses selected JavaScript methods.
Define separate <script> tag in each HTML file separately.
What is the best design option here?
Lukasz, this innocent question is a big topic. To get started with JavaScript performance and maintainability in a nice place, follow Steve Souders' writings on this.
And use JSHint. That's much easier if your code is in a JavaScript-only file. To find out about other good practices, read idiomatic.js.
A single minified file is the most performant - less requests and smaller download. But not one global js for everywhere, that would be a pain to debug/develop.
Use a cdn for libraries as probably cached in browser.
IMO I will have separate tags for separate javascript snippets/plugins, it will make my javascript code easier to maintain. I can remove the plugin/add the plugin without disturbing the other javascript snippets.
But for performance issue, modern browsers will run 6 consecutive threads to download the resources, so it will be good idea to profile the loading times of the site/web app. You can use tools like Firebug/yslow to profile http requests being sent from the html page.
Personally I use template engines like Sitemesh and create templates for jsps for different parts of the application.
And for javascript I mainly use JQuery and a lot of plugins.
Minify js is a good and acceptable way. it also helps to build js files on the server side at run time. This is a big topic. Here are some good advices from yahoo. I use these as my guidlines. Also read on the topic js minify
http://developer.yahoo.com/performance/rules.html
I've developing JavaScript since many years but have never really thought about the whole testing, developing and building stuff - but I realized it's pretty much necessary. We've just used a Subversion repository with simple release tagging (switching to git soon). As a new bigger pure JavaScript project (using jQuery) is arriving soon, I'd like to optimize the whole process.
I already did some research but never found a good starting tutorial.
It's definetly a good idea to split classes and separate code blocks into several js-files and not a big one (as Prototype or jQuery do it). These js-files must be "build" into a single file. How do I achieve that?
It's pretty much necessary to Unit-test the stuff me and my colleagues are coding. I found the js-test-driver which has an eclipse plugin that seems to be doing his job quite good. If my developer-folder contains all these src- and src-test-files, how do I integrate this in the building process?
For testing, take a look at this: https://stackoverflow.com/questions/32809/javascript-unit-testing
For merging all of your JavaScript into one file you can use something like YUI Compressor. You need to be looking for a minimizer first, compression second. A minimizer just takes the files and merges them together and gets rid of whitespace. A compressor will actually try to optimize the js for you by changing variable names and removing unnecessary code.
As for unit testing I am unsure of how you will want to do that. There are a few unit test libraries out there. A popular tool for testing is Selenium. I don't currently do unit testing so I am out of my element there..
For setting up your code you could always look at using a JavaScript framework like ExtJS or JavaScriptMVC. Those help you with setting up your code in the proper way and also helps focus your team on the proper standards and coding structure while also writing a lot of the code for you so you don't have to re-invent the wheel.
EDIT: Just a quick after thought. Even if you don't want to use a JavaScript framework, I would suggest checking them out, especially ExtJS, just to see how they organize their code and some of the tricks they do to keep it clean.
I'll answer part of your question:
These js-files must be "build" into a
single file.
This is possible only with server side language - in ASP.NET you have built in tools for that, otherwise build your own "merger" server side file and reference that file instead of the actual .js files.
These js-files must be "build" into a single file. How do I achieve that?
Definitely keep your files separate in version control, and only merge them during the build process.
The YUI compressor mentioned elsewhere is a java-based tool that will not only merge but -- of course! -- compress your files for faster download.
If you just want a simple merge of files, a simple Perl or bash-script (or other preferred scripting language) could concatenate multiple .js files into one for release -- just make sure that the build script also updates all HTML in the release to reference only the single page.