Project template for jQuery/Ajax in WebStorm? - javascript

I'm getting started with Ajax (jQuery) using WebStorm and not sure what project template to use for it.
I've added the jQuery plugin in WebStorm, but that doesn't give me additional project templates to choose from. I was hoping for some equivalent of say a new Angular JS project (which gives you a stub of what a typical project may look like in terms of structure), as I've never used jQuery/Ajax.
Or is that somewhat irrelevant, there isn't a lot more to it than just starting an empty project, adding an html & a .js file and start from there?

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.

Angular2.JS files with d.ts files WITHOUT npm Visual Studio 2015

Does anyone know of a recent blog post or tutorial on which angular 2 .js files along with the appropriate d.ts files I need so I can just drop them into an existing VS solution without using NPM? I see that I can get the angular files here, but not sure which ones I need. According to the Angular docs, I need do nothing to get typings files for library packages that include d.ts files—as all Angular packages do., but again, when I look thru a sample Angular app, don't know which d.ts files I need.
I can't stand bloat and clutter. Below is a brand new asp.net core on .net 4.6 on the left, the same thing on the right after following this blog:
I can't stomache having to add over 13,000 files to get ahold of maybe 20?, 30? files.
Maybe I'm being too OCD about this, but right now I'll take any suggestions to avoid that bloat, even going with another front-end framework. I've briefly looked at Aurelia, which I like, but again, NPM. Not sure React is appropriate.
My business domain includes Category, which is a self-referencing class/table, and I'm after an intuitive UI where the user can quickly create their own Category structure without having to do a bunch of post-backs to the server. Seems with either Angular2 or Aurelia, I'd only need a couple of Components to accomplish this in the browser.
I know Angular 1.5 added Components, and I may explore that if need be. From what I understand about React, it's not for data management.
So to reiterate my questions, can I get just the Angular2 files along with their d.ts files so I can code in typescript? If not, the same question for Aurelia. And if not, any way that I can keep bloat down yet still write some elegant front-end code.
Any help will be appreciated
Ok so for Development purposes yes your Angular 2 stuff will be massive (its annoying but necissary) however as I am sure you know, once you build your angular app for production (using angular cli for example) it cuts all those 40,000 files down to about 10. for example this is my application before and after production...
and after
So I would guess you want to build your angular stuff out first and then drop it in you application

How to set up Jade for Cloud9 IDE?

I want to do some front-end designs in Cloud9, something like a portfolio page with some CSS animations etc, and rather than writing in vanilla HTML, I'm interested to learn/use Jade, since it will make the code look clearner.
How do I setup Jade in Cloud9? For example, set it up so if I change index.html to index.jade things will just work as normal.
p.s side question, is Jade a good choice for my purpose? I've heard Mustache, Handlebars, Slim, or even using React? I just want to write HTML like using Sass.
If you'd like to use Jade anywhere, you'd have to translate Jade to HTML before serving it. The following is the general way:
Store your Jade files in a separate folder
Use either the Jade command line or use Grunt plugin or Gulp plugin for compiling all your Jade templates to the destination directory where you're serving your HTML from.
[Optional step for Cloud9] If you've set that all up, you can use Cloud9's custom builders (Run > Build System > New Build System) to add that to a builder that you can invoke using the build menu.
I assume here you just want a simple Web page, and aren't using Express etc, which would have a somewhat different flow than the above.
Regarding your side question. I don't think StackOverflow is the best place to ask that, and in any case, the answer to any such question is eventually 'depends' and 'try each of them out', 'research', 'use what you know best', 'use what suits your needs best', and some combination / mutation of the above :).

Is it possible to use factory_girl.js with teaspoon?

As part of my trying to learn web development, I have reached a point were I have some coffeescript classes I would like to test inside my rails environment.
I have a rails 4.03 app that I have been working on (it is based off the rails tutorial).
During the process of learning rails, I got used to working with rspec and FactoryGirl, so I would like to try to follow a similar flow for the coffeescript if possible.
I wrote all my coffeescript as individual classes, each in there own file, so I think they should be testable.
I currently have teaspoon installed, which looks a lot like rspec. I have this working with some basic tests, but now I need to start writing real tests. Teaspoon has support for fixtures, but I noticed that there is a node.js package called factory_girl, which seems like it is a port of the ruby FactoryGirl for rspec. I installed this package using npm -install and now I have it listed in my rails folder under "node_modules".
Can someone tell me if it is possible to use this package to generate objects for testing with teaspoon, and if so how?
Update:
I am marking the answer below as accepted, because I was able to get FactoryGirl to run.
What I did was (as suggested in the answer) was to copy the factory_girl.js file into a location that could be loaded by the assets pipeline spec/javascripts/support, and then required it in the spec/javascripts/spec_helper.coffee file.
The problem is that the functionality does not seem to match what happens in rails (unless I am completely forgetting how it worked in rails). In Rails, I could define a factory for a model and the objects created would be instances of the class I was associating the factory with. Here there does not seem to be any association with the class I am trying to generated instances of. For example, only the properties I define in the factory definition are available, and none of the methods are defined on the objects.
I could be doing something completely wrong , or maybe trying to use coffeescript breaks this somehow.
Teaspoon doesn't use node (mostly), and is primarily rails based in terms of the runner foundation. On top of the rails layer, it uses Jasmine, Mocha, or QUnit as browser test frameworks.
Trying to load a node module in to that is not really easy, or possible in some cases. If factory_girl.js can be loaded into a browser in theory you could require the file (if it's in an asset path) within your spec helper and then use it however you want.
Disclaimer: I'm the primary author of Teaspoon, but have never used factory_girl.js (but have used factory_girl the gem).

How to work on Javascript projects?

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.

Categories

Resources