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.
Related
So, I'm heading to new territory in web dev.
I set up a basic npm project using npm init in my project folder. I don't have angular, react or any other Dev framework running. Basically I want to get started with some npm packages to easily update the things I need.
For my first test I picked bootstrap and font-awesome.
For testing I have a http-server running and displaying a index.html file from the public folder.
The site I'm displaying is a basic html site for now. How do I actually implementy packages the right way? Using <link rel="stylesheet" href="/path/to/node_modules/..."> is one option but not actually the way it is done, right?
Or will it be repacked once I'm ready for production. Since node_modules is not going to be transferred to the prod server.
Thank you very much in advance!
there is a difference between running javascript in nodejs and the browser javascript engine.
although nodejs is built on top of v8 javascript engine, nodejs is different in some ways, here are 2 of them:
nodejs is used mainly in server-side programming, where javascript is used for client-side
nodejs has builtin libraries which are not in the javascript specifications
if you are developing a client-side in nodejs (using react, angular or any other client-side frameworks), you will have to "convert" (a process called transpiling) it to run within the browser.
there are several tools which can help you in the process of transpiling your code. some famous ones are webpack and parcel in conjunction with babel (to pollyfill) to "build" your project and yield a bundled (few javascript file, usually one, that bundles all the javascript code into one of more files) javascript file(s), which are loaded by the webpage.
as you can see, once the project is bundled, node_modules directory has no use -- exactly what you want.
I am writing application by using Python/Flask as the API back-end, and want to separate the front-end (browser-based) as an individual project (VueJS). I've read about Webpack, but I can't find any best practice to start, such as: can we use NPM to manage dependencies, use webpack for front-end not using an Node app as an entry ...
Thanks alot
WebPack isn't a framework.
It's something that a task runner.
Exemple: You use SASS, you want something that compile all your sass file in CSS file. You create a task and webpack have a task now. And you can ask him to automaticaly compile the file when change.
Maybe what you want it's more have two project:
One who handle the data an may available with an api
One who is the web ui for the user who get the data and format it in a beautifull UI
Webpack won't be your solution. Continue with your VueJS and look at VueX for your data handling browser side.
I am new to programming and I learned how to use laravel and vuejs (which now ship together in laravel 5.3). I'm only practicing Vuejs right now, and was wondering what is so wrong with installing Vuejs using a simple src link rather than going the complex way of installing with npm and node.js, which is another learning curve for me if I have to learn it down the road anyways. Thanks for answering, I just don't understand what could be wrong with a simpler minified src link for a Vue.js installation.
If you use standalone version of Vue.js via a simple minified src link, it will come with a template compiler. The Vue component templates will be compiled in the browser environment for every user, before rendering. Therefore it will be slower compared to the runtime build option.
If you create a project using npm and vue-cli, you will get the runtime build of Vue.js, which will also package the vue app into one single app.js file, thus minimizing network requests for your production app. Your users will have a much better experience.
If you are only getting started, you can go with the simple minified src link for now. Once you get used to the framework, you can start using vue-cli.
I am using angular2 with nodejs, how about using apache/xampp. will it support or nodejs npm server is mandatory for angular2
Considering for development ,NodeJS is Mandatory for angular2 !
let me tell you why?
Angular2 comes with typescript support which is transpiled into javascript.
NodeJS offers typings & other dependency packages like SystemJS,RxJS which helps angular2 do thye magic you call Angular.
Though you could run angular2 apps in Xampp but recommended approach will be with NodeJS as it offers a lot more flexibility & framework support for development.
for eg. Angular-Cli is node module which helps you setup your project really fast.
On top of that node gives you flexibilty to add third party libraries easily into your project.
You can use Xampp but then you will need your server to load transpiler manually which will transpile ts files into javascript files as currently there is no support in Xampp as far as I know and that will be quite a task to do.
So I will go with NodeJS on this.
For production:
once you build bundle from your application , it can be deployed to any server which runs javascript. So in that case NodeJS is not required.
It depends on what we are talking about.
For Development you must have NodeJS on your dev machine to load all libs, transpile TS, prepare build files and so on.
For Production server you can use whatever you want, if you have already prepared js bundles with all deps and your app, just static files with index.html, css, js, jpg files and so on..
I will also recommend you to go with Oleg Barinov.More over Angular2 applications only consist of static files so they can be serve by any static Web servers or server applications that can define static folders (Express, ...)
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.