I'm using node.js and backbone for a web app. Backbone is part of my package requirments. I've used Rails and Backbone before, and the helper gems are nice for piecing together all the assets (js files) that need to get to the client.
With that said, I had to manually download backbone.js and manually add it and all the other supported js libraries in the header of my app's layout file.
Should installing the backbone module get me away from that manual effort to create the required source for my client app? Is there some kind of jammit/asset pipeline?
you should simply npm install backbone in your main directory, this way all the submodules you use will find this exact backbone, and will use it
moreover, this way you can easily extend backbone with additional submodules
I use the stitch package to serve my scripts in node apps. With that, it's as simple as listing backbone.js as a dependency, and I install it with npm. That's convenient.
Related
I understand that when we talk about the frontend we're talking about files being served to the browser of the person accessing my page. So, frontend javascript libraries are only javascript code that is being sent from my server to the browser.
So far everything is fine, what I don't understand is why npm has repositories for frontend libraries. Let's take this Leaflet example, I can install this library with npm using npm install leaflet -s. But what would be the purpose of doing that? I see that if I open Visual Studio Code and I declare this library with const leaflet = require('leaflet') then I can see its functions and documentation in a more clear way on the suggestions after typing leaflet.... I don't think that's the purpose of installing a library like Leaflet on Node.js though (since it works only on the frontend). What am I missing? Why would anyone install frontend only libraries on Node.js?
There are likely other reasons, but this is they reason I've done it and the reason I've seen other people do it: Many people use Node.js tooling to bundle/build webapps, so you might install your frontend dependencies, and then use rollup or webpack or browserify or TypeScript tooling or whatever to bundle it into a single .js file. Since you're likely already installing the tooling with npm, installing the libraries also with npm means you don't need some other tool to do it.
Additionally, people also use npm to install libraries for electron apps, cordova apps, React Native apps, etc. And these things can all use frontend libraries because they basically have a web view embedded. (To be honest, I'm not sure that's the case with React Native because I've never used it, but I assume it is.)
Since you mention Leaflet specifically, here is an example of someone using npm to install leaflet, and then using browserify to make it so that they can basically write Node.js code (including require('leaflet') and run it in the browser.
I'm new to Node.js web development. Just created a project using ExpressGenerator (project structure generator for ExpressJS framework).
The question is: if I want to use FineUploader front-end JS library for my application, which is provided through NPM package, how should I embed it into my project properly? package.json manages server-side dependencies. When authors of front-end module publish it as npm, what approach to further usage they imply? Another package manager like Bower?
You are correct that package.json manages server-side dependencies but not entirely. You can - and should - rely on it to manage front-end dependencies as well.
For that to work you will need a module bundler, to package the node module for the browser. Some of the most popular bundlers for accomplishing this include Webpack, browserify, rollup among others.
Also note that you can delegate the bundling of node js modules to cdn services such as unpkg or wzrd so that all you need to do to use a node module in your front end code is include a link in your html to the cdn bundled module
I am currently working on two related projects. One is a Phoenix based website and API, while the other is an Angular2 application that among other things uses the API provided by Phoenix. I now want the Angular2 application to be used by the Phoenix project. The problem is that I don't know what the best approach is. I am very new to Angular2 and NPM, and know very little of how it actually works outside of basic usage. These are the ways I can think of solving my problem:
Put the Angular2 project into the Phoenix project, making it one project. I have no idea how to do this, but I will probably get there through trial and error as both use Node.js so it should be doable.
Publish the Angular2 project to NPM, and then import it to the Phoenix project. How much work would be needed on the Phoenix side? Would it be the same as just running the index.html in the Angular2 project? Would I need some kind of Angular2 "shell" around it?
Run the Angular2 application as it's own thing, and just link to it through the Phoenix website.
Importing it as a node module sounds like the best approach, but can it be done for full applications, or is it intended for support libraries only?
I am unsure if this is the "right" way to do it but this is what I did in the end:
I compiled my entire Angular2 project into app.js, vendor.js, and common.js, I then moved it all to web/assets/. After that I simply created a new html and referenced the files in question.
The biggest challenged was finding something to compile it all into these 3 files. I ended up using a stripped down version of: https://github.com/AngularClass/angular2-webpack-starter
I think you would want to leverage brunch.io, which ships with phoenix to handle your front end dependencies. There are skeletons which are essentially templates that create different front end configs but I don't see one that provides angular2. In this case I would say use bower to install the js packages you want ie:
bower install -S angular2
With this you can use brunch as a processing pipeline and it will handle minification, linting etc. and you will still be working within the "recommended" approach to managing front end assets in Phoenix.
I want to use emberjs to simplify the client-side user interaction and ajax update requests for my rails web site. In emberjs they say:
If you are using build tools to manage your application's assets, most will know how to precompile Handlebars templates and make them available to Ember.js.
and
If you're using build tools, create a Handlebars file at templates/components/blog-post.handlebars
I know how to precompile handlebar templates through the npm handlebars tool, but that does not seem to work with the components since handlebars doesn't care about folder names.
I searched and found ember-tools and ember-cli, but they all seem to work as a server framework. I do not know much about nodejs as server. So I am not sure whether it is appropriate to choose emberjs in my case, and how should I build handlebar templates (such as components) for emberjs client-side usage?
You can use Ember-CLI, or the Yeoman Ember Generator (https://github.com/yeoman/generator-ember).
Those tools have a server while you are developing for convenience, but they have a build process that generates all-static files (minified js, compiled templates, etc) that you can publish to any server.
Eg, in Ember-CLI you would run
ember build --environment=production
and it would put the generated (static) files in build/
Also, take a look at Use Forever with Ember-CLI
It seems that I don't have to build templates/components manually, there is a ruby gem that can do that automatically: ember-rails. It is mentioned in GETTING EMBER but I never thought of looking at that page.
I am using Express with Jade and I installed backbone.js and jQuery via npm. Do I copy the appropriate js files into my public/javascript folder or will Jade understand if I use require() inside the view template file?
Please steer me in the right direction.
Thanks
Anything installed with the package manager is available by require(). If you're trying to use the libraries to be rendered client-side, then you shouldn't be installing them server-side.
As hexacyanide says, Anything installed with the package manager is available by require().
If you want to use packages installed via npm in the browser, you may want to take a look at browserify. Although I'd recommend to at first simply using the files provided on the backbone and jQuery websites. It's less to learn.
NPM is only for server side JavaScript packages.
If you want to manage your client side libraries with a package manager take a look at bower, which shares some concepts of NPM, but for the client side.