How to work on Javascript projects? - javascript

I am trying to write my own Javascript Framework something like jQuery.
I use Aptana Studio for designing websites. I was planning to create a web page and write the Javascript code just as we would do for a website. Then I noticed that Aptana Studio also has a Javascript Project. So I created a new Javascript Project. But it primarily allows you to create only .js files and no HTML files. I wonder what a standalone .js file would do? Would't I need an HTML file to execute and test my Javascript code?
Certainly there must be some advantage to using the Javascript Project. But I am not able to figure it out. Can someone please explain how to use the Javascript Project?

I don't know anything about Aptana Studio, but I'm guessing that you're intended to drive your JavaScript project from another project. Think of the JavaScript project like a self-contained library. It doesn't make sense to include the test code in the library itself, because consumers of the library probably don't want to deal with it. Try creating a second project that imports your JavaScript project and allows you to play with it and test it.

I would recommend that you try Javascript-Test Driver. It has an IDE support and also it seems to be fairly good at helping you debug code. Find more details here:
http://code.google.com/p/js-test-driver/
I would say that while you DO need HTML files; you'd probably wanna do more according to the testing framework you choose; as some work with fixtures other loads up iframe and stuff. But I would presume that writing a whole framework would take more than just HTML pages and a unit testing framework would be more apt for the req.
Screw Unit for JS
http://github.com/nkallen/screw-unit
I know I have deviated from your question; but I just felt that rather than right project structure and HTML for testing what would be more important is a testing framework that keeps development agile and fast.
But that's just me.

Related

JS: How to serve up vanialla JS, HTML and CSS without static html pages?

I want to prototype a quick app but don't want to go down the road of using a framework like React or Vue. I'd also prefer not just creating an html file and a js file that is imported within the html.
Is there a way I can make use of npm packages, SCSS and still write vanilla Javascript without the usage of a framework?
Without using a framework, the most straightforward way to using NPM packages in the browser would be using Browserify. Check out https://medium.com/jeremy-keeshin/hello-world-for-javascript-with-npm-modules-in-the-browser-6020f82d1072 for instance.
Otherwise you can use Gulp,which helps running Browserify, SCSS etc, and use BrowserSync to refresh on changes. But I personally wouldn't go this way: while this is a great way to understand how stuff works, it takes a bit of time to setup properly, and isn't used that much anymore.
My advice is:
Go with Webpack or Rollup. Seems harder to grasp than Gulp but at the end of the day, learning Webpack is very useful (much more than learning Gulp), for instance if you happen to work on a project that uses it (and there are so many).
Use a backend framework that bundles all this kind of stuff. Like Laravel which uses Mix - you can even use Mix without Laravel but there will be a point at which you'll probably need some static data, some routing, interactions... So if you need something more than just hardcoded JSON data, go with a framework. Laravel is great for prototyping but it's not the only one.

Guide for extending the Javascript language on VsCode for a 3rd party API

So I've started using VsCode over Atom recently and love it, the issue is I develop for software that uses its own JS API with no proper integration into anything.
I've started trying to implement my own autocomplete/intellisense structure using their pdf into VsCode to speed up my workflow, currently I'm simply using a JS file that is full of empty functions and objects with a bunch of JSDoc comments to help VsCode Intellisense identify what's what, that seems to be working fine so far but it means importing this "useless" file into every project I work on.
I looked into extending the JS language using a language server but that seems way too complex for what I need (plus it looks like I'd be building the entire Javascript language from scratch).
Does anyone have any recommendations ect?
Kind regards.
Edit
Sorry I also would like the ability for it to pass linting as right now it gets a bit funky with it.
You likely do not need an extension for that your example use case.
VS Code's intellisense for libraries is powered by .d.ts typing declaration files. The declaration files for the library you are using can either be written in your current workspace as you are currently doing, or—preferably—shipped with the library itself. Many npm modules ship their with typing definitions files, while other libraries have typing definition files provided by the community through DefinitelyTyped.
You alternatively bundle d.ts types file into as a separate npm package that you include in any project that needs them

Using .js file extensions whilst writing scripts that return jsx

I started using react as my ui framework of choice. Upon my adventure through the documentation I noticed that when using the create-react-app script to spin up a new react boilerplate, they used .js file extension on scripts that where returning jsx code. When I asked my buddy he told me that you should use the .jsx extension on scripts that are returning this kind of code.
Im a bit lost here as if both works, wouldn't it just be better to go with the .js extension as at the end of the day its javascript we writing.
Please help me with what is considered best practise. (I kinda have a feeling it would be to use the .jsx extensions on these types of scripts, but I'd love to hear the community's view on this)
Thanks in advance :)
It's really up to personal preference.
My personal opinion is JavaScript is JavaScript, and I just use .js. Others will prefer to use .jsx in files that are JSX and .js in for things like utilities, in order to differentiate. The only important thing is to be consistent in whatever you choose (at least within one project).
In general, it doesn't matter.
The only time it might actually matter is based on your build pipeline. Some build pipelines may be configured to compile .js and .jsx with slightly different rules, but that would be based on your application (things like create-react-app don't care).
At the end of the day, you could use a .cookiemonster extension and it'd work just fine (as long as your build pipeline is configured to handle it).
Actually it doesn't matter, is up to you to decide I prefer to use .jsx when I return the mix between HTML and JS and use .js only when I'm using plain JS or ES6.
I recommend you to read about this on this issue on github.

Javascript plugin written in AngularJS

I made an app in Rails and AngularJS. A startup approached me to port the technology over to their site, but they have very limited technology resources, so the idea is to make it very easy to integrate.
I want it to work a bit like Google Analytics - they include one external javascript file and add a snippet of code with a reference id/code in it. Then the rest is handled on my side.
I haven’t done this before, especially not in AngularJS. I want to use AngularJS in a section of their site without them needing to install it.
Should I just put all the directives and services into a minified file or should I have a smarter setup?
I would appreciate it if anyone could point me in the right direction. I'm also looking for any recommended gems/tools that can help me with this. I’m happy to explain further if needed.
Update
I ended up using Brunch, this article was very helpful.
You could create a grunt build task that will inline your html templates as strings into your js, and then concatenate and minifying your code.

Packaging JavaScript & CSS

I was tasked with figuring out how to package JavaScript and CSS into one file per each. We have a java servlet application and we use JQuery if that makes any difference. We use ant to script our builds, so easy integration with Ant would be nice. We want to do this to reduce caching issues and to reduce number of requests to the servlet.
I found few tools out there, but not sure what are pros/cons of each. Here is the list so far:
JAWR (http://jawr.java.net/)
Juicer
(http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool)
JSBuilder2
(http://www.sencha.com/products/jsbuilder/)
JSLint
(http://code.google.com/p/jslint4java/)
(JavaScript only)
Quilt
(https://github.com/kitgoncharov/quilt)
(JavaScript only)
Do you guys have any recommendations, warnings, advices? Or maybe a better tool/framework?
Thanks in advance!
For JavaScript, the closure compiler integrates with Ant. It can concatenate and minify your JS. You can also use YUI compressor. Here's an example of using YUI compressor with Ant for JS and CSS.
By far my favorite template is HTML5 Biolerplate The build script there is pretty good as a template.
Also, versioned files with long cache times will greatly improve load times.
Replace "being nice" with "a must". You absolutely want something that integrates with your build tool since you do not want to minimize your files manually again and again and again and again and again and again and again and again and again and again.
Jawr - very nice library, makes everything for you, simple to integrate (at least with its Grails PLugin).
The small problem, I havn't found a way (may be it exists) to integrate ALL bundle's dependencies in a single file. (if you don't have dependencies between bundles (modules), you won't regret this decision).

Categories

Resources