Disclaimer: I know almost nothing about servers. Sorry if this question doesn't make sense in the first place.
I'm building my project in Node.js with CoffeeScript and Stylus and some other compiled stuff. Until now I've made a script to compile my code into regular JavaScript and CSS, then run it. I'm planning to upload the compiled assets to the production server, so there's no trace of CoffeeScript or Stylus anywhere afterward.
But I know that it's possible to directly run server-side CoffeeScript (coffee app.coffee), and that there are middlewares in Node which compile and minify client-side CoffeeScript and Stylus on the fly.
My question is, why let the server do it each time, instead of compiling the code ourselves? Wouldn't the first option add more strain on the server for no reason?
Thanks.
It would not add strain on the server. An educated guess would tell me that one it compiles and minifies your CoffeeScript it caches the result for each subsequent request.
Manual processes introduce risk and probability of error.
Related
Since Laravel 5.4, the default method to compile assets is using Laravel Mix, instead of elixir.
I know that "Mix" uses WebPack by default to compile the assets.
What benefits does this method bring?
The Mix also allows you to compile without WebPack, and this always
produces files that are smaller in size and work the same.
This is entirely incorrect. Have you attempted to configure any of the myriad options to optimize your bundle at all?
Start with the webpack-bundle-analyzer plugin. This will give you an idea where your bloat is, what is duplicated, and where to start trimming your application.
Between uglifying, chunking, deduplification, minification, etc. you'll have in the end compiled resources that are far from "large".
Now I'll grant you it has a steep learning curve comparative to other tools, regardless, WebPack is an incredibly powerful tool, you need to take the time to learn it's configuration capabilities.
Care to elaborate on what you mean by working the same? I run several production applications as well as a number of smaller personal projects. I never seem to get different results after each build.
But in the end it's just a tool. A tool like any other tool, you use what you feel comfortable with and what fits for the job. There's a reason it as selected as the default, though. And it isn't because the maintainers are ignorant by any means.
Does Angular cache the js files if I do not build the app and only copy all the js, html and css files as is into production? Do they also download them only when needed?
How does angular take care of js files download and the method in which they are instantiated? Seems like ng-cli creates a single minified bundle for the app and there is no option to create just minified js files which are not bundled into one single bundle file. So seems like they are not lazy loaded and not downloaded on the fly with an http request.
This really takes a toll on the app and the load times are really slow.
The files are cached, yes, but they are not compiled. That is what it is making the pages to load slow.
Follow this guide to make your code compile ahead-of-time and your pages should start to load much faster!
Some ways to speed your load times include using Webpack, Ahead-of-Time (AOT) compilation, and Lazy Loading. I've found that the most effective way is using Server-side rendering (aka Angular Universal).
JavaScript newbie here. I'm new to Angular2 and am currently learning about things like module-loaders (there's so many!), etc, so bear with me since my space of "unknown unknowns" is probably quite large.
I'm interested in creating a JavaScript based "Packaged Web App" for windows ("Packaged" in the sense that the JS is included in the Universal Windows Platform app).
One constraint to keep in mind is that I have severe limitations on the size of my packaged app. The smaller, the better.
With that in mind, I have a few specific questions that will hopefully expose the extent of my ignorance:
Without resorting to Electron or Ionic2, is it possible (also, is it a good idea) to create the offline experience in Angular2 and then only manually include the resulting transpiled .js files in my Visual Studio project?
How hard is it to manage the dependencies for these transpiled files? Are they entirely self contained?
Roughly how large would the minimum set of manually imported files end up being? When I use NPM to install angular2, it winds up being ~80mb - a large portion of this (most?) looks like dev tools, test infrastructure, etc. What's the minimal set of angular dependencies needed for the client app to work?
Thanks!
Without resorting to Electron or Ionic2, is it possible (also, is it a good idea) to create the offline experience in Angular2 and then only manually include the resulting transpiled .js files in my Visual Studio project?
Yes, it is possible. TypeScript will be compiled to javascript codes, which will be consumed by your project. So eventually, it is compiled js codes that will be necessary for your project.
But, if you are so worried about your project's size, then I suggest you using Angular 1, which is only JS codes. And for the minimum size of Angular 1 and its dependency jquery. There is a compressed version of Angular 1 (angular.min.js: 164kb) and jquery(jquery-3.1.1.min.js: 85kb).
Answering my own question here:
Yes, it's possible. You can copy over the transpiled .js files and then simply point the webview control at the generated index.html. With that being said, it's a pretty kludgy dev experience since you're constantly working around VS.
The dependencies are handled for you - it's all in the minified/uglified js files.
I haven't investigated tree-shaking yet, but it looks like I can get away with ~0.5Mb with a skeleton project.
I am beginning to use Go for web development, but I am having issues with asset management. I would prefer to have a tool like Rails' Asset Pipeline for managing (and compressing) css/js files (as well as SASS), but I am still able to work with css and js files.
While I am able to work with css and js, I am not able to work with SASS. Is there a way to use SASS in a Golang project? I am not using a framework.
Thank you!
I'm not familiar with Ruby on Rails but, I assume, that ruby on rails gave you some sort of tools for managing the source to distribution client-side asset transition (polyfills, transpiling, minification, compiling of SASS/SCSS to CSS, compiling of XScript to JavaScript ... etc).
While a web development framework might do that to try and ease in developers quickly (I assume rails does that, not ruby) its not exactly the way Go does stuff.
Go is a language, not a framework + language, just a compiler, a few build tools and a set of standards for how to write, test, document and indent stuff (with the indent,test and document part being optional).
A go server, at least the way I built servers with go, is somewhat decoupled from the client. It server static assets when they are needed (e.g. it serves the minified JavaScript and the stylsheets and the html, and jsons with info from the databases... etc), but it doesn't really care about what those are, its a server. The go toolchain is made for building golang applications (e.g. said server), but its not made for building client-side web applications (those consisting of js, css and html).
Now, you may use a framework similar to rails written in go that helps "pack up" css, js, html. But I'm unaware if there are any.
You may use a compiler which turns go into client-side code (i.e. javascript) https://github.com/gopherjs/gopherjs , if you enjoy the go toolchian and want to use it for client-side development. But, go-like performance isn't something this gives you AND you are working with a subset of go. Its really just a different way to write javascript.
However, what you most likely need in your case is a "build-chain" for your client side. Here there are 3 tools which (in my opinion) stand out in 2016:
npm
webpack
bower
I could write an essay about using this tools but here's the summary:
Webpack is used to create a "pipeline" for your code which does thing like, calling babel on javascript, compiling sass to css, minifying assets, allowing js to be written with import syntax... etc, really, its a swis army knife in your js development arsenal and probably matches the functionality of whatever you were using before.
Npm is the node package manager BUT even if you are not using node for your server. It can be useful to keep tracks of dependencies for building your application (like webpack) and for downloading modules. Its also useful for running various scripts and deployment, its a bit of an overkill to use both npm and weback though you will probably have an easier time setting up the webpack enviornment if you have a package.json (config file for npm) with each of your project.
Bower is one I actually don't use for small projects. But its basically a repository for javascript libraries (among other things), so you can easily say, write "bower install jquery" and you've downloaded jQuery for your current project.
Again, there are many other tools out there, these are just some of the ones I like, but, check some of them out. They can help you replaces your previous pipeline. Don't think of client and server side code as being the same, they are decoupled and having a strong separation between them might help you a lot.
I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here. That all seems to work but now I need to build each time I change a file.
Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.
Is it possible to do something so that webpack "expands" the bundle in some easy way?
P.S. I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.
Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:
npm install webpack-dev-server
webpack-dev-server webpack.config.js
Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application` tags.
This is by far the best option as you get instant incremental recompile and live-reload.
While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:
webpack ---watch
There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.