I'm creating a little SPA framework (might be a full-feature framework).
Frontend is based on native javascript (including ES6 features and web-components).
Backend is written in Go.
Here is a list of my needs, that I'd like to do automatically:
Minify my javascript files
Transpile ES6 code to ES5 (with something like babel.js)
Polyfill my web-components
Is there a way to achieve this without using node.js? Are there already go packages that can make those 3 things happen, with a "simple" grunt/gulp-like way?
I would like to avoid installing node.js, npm, bower... etc.
In my (not very classified) oppinion, using those node.js tools makes my application a mess adding a lot of unnecessery overhead to my application folder and makes my framework dependant on a lot of stuff (that application programmer has to learn, understand and know how to use).
Thanks for any tips/oppinions.
If you're doing a SPA you should just stick with gulp and others. You'll probably end up using npm stuff like browserify, autoprefix, etc, and you'll basically end up reinventing the wheel with your own asset pipeline.
With that said I've seen a couple, but none of them looked very mature last time I looked:
https://github.com/jbowens/assets
https://github.com/shaoshing/train
and you're going to need npm installed to use them regardless.
Related
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.
I'd like to know how to obfuscate a website build using the create react app project. (Rest assure the purpose for obfuscation is merely obfuscation itself and not any misguided sense of security).
Is there a way to use the popular uglify JS library in the build pipeline of the react app? How does it interact with various react features? What about dynamic imports? As of right now, there's almost no reliable literature on the matter anywhere else so I'm wondering if this can be done at all.
What about obfuscating CSS? (Random class names) Or is it possible to obfuscate generated HTML? (by randomizing div nesting)
UglifyJS is already a part of the react build process when you run 'react-scripts build'. You are able to disable sourcemaps when you run this build process, if you don't want others being able to read your code straight away, although it can be run through external programs into an easy to read manner.
If you want more control over the build/pipeline process, you will have to use a bundler. There are multiple out there such as browserify and webpack. Here is a short guide I found after a quick search. I hope this information helps.
Browserify great and all, and makes it really sweet (even compared to require.js), but the idea of bundling everything into one minified file although sounds great for final version of the app, feels like something I would like to avoid during development. Wouldn't it make difficult to debug stuff?
Is it possible to use browserify and still keep all javascript files and make it more transparent for the browser during development? And when you ready to ship it run browserify bundler and minify everything into one file?
Or maybe there's better approach - like keeping all scripts listed in a partial that gets included to the main page for development or something like that?
Upd: I just found that there's an option:
--debug -d Enable source maps that allow you to debug your files separately.
Is that helpful? I guess it is. But I suppose it still makes it difficult if want to use coffeescript source maps
Indeed you shouldn't use minified/concatenated Javascript in development. Luckly there are a myriad of ways of solving this particular issue, I recommend taking a look into an automated build process like Grunt.
In order to build static web pages to serve interactive news applications (mostly data visualizations scripted with something like D3 or lightweight apps built with Bootstrap.js), is it worth the effort to install and configure a build system like Middleman or Grunt.js?
The reason why I am asking is because I am not familiar with Ruby and Ruby Gems at all, and do not have the time and willingness at the moment to dwelve deeper into it, as I already know Python & Javascript pretty well.
Do I need to know Ruby in order to use Middleman productively? Or should I just use Grunt? I am asking because I want to reuse the same templates over and over again and heard that this is easy with Middleman.
There is a distinct difference between Middleman and Grunt.
Grunt is a generic task runner while Middleman is a static site generator.
Middleman for example would be used to create a site with multiple URLs. You put some files in a folder and Middleman takes care of arranging them, creating subfolders for URLs, rendering layouts, compressing assets and in the end you have a bunch of files that represent the site. All this is built in.
You don’t necessarily need to know a lot of Ruby to get started with Middleman, but to get the most out of it, understand how it works and change configurations to your needs, basic Ruby knowledge is key.
Grunt on the other hand works by using plugins and telling them exactly what to do. By default it does nothing. You could think of Grunt as "framework", ready for you to add tasks. Compress these two css files. Combine these JS files and move theme over here. Things like that.
For building a complete website I recommend Middleman. In order to be able to use the templates you create in another language like JS, you could use Jade as a templating language. By default Middleman uses ERB (part of the Ruby standard library). Another popular choice is HAML, but I’m not sure if there is a decent JS compiler for it.
If you want to have really fine grained control over the output of your JS files (you’re talking about JS client side apps in your question) you can even use Grunt and Middleman together. Grunt would take care of the assets (you can have really detailed configurations there) and Middleman would handle templating, URL generation and all the other "default website related" stuff.
If you're keen to use Grunt as a base for this sort of build, you may like to look at Assemble.io.
This is a static-site generator like Middleman, but one that is completely (currently) dependant upon Grunt tasks in order to do its thing.
I believe the learning curve for Assemble.io is rather higher than Middleman. It is based on Node, rather than Ruby. However I don't believe it's necessary to know Ruby in order to get a lot from Middleman.
You may have a look to http://wintersmith.io/ a static page generator like Jekill or MiddleMan (I don't really know this one)
With Grunt you have something at a lower level: Grunt provides you tasks to automate things so you'll have to find or write the task that fits your needs.
I have been intrigued by the power and elegance that Opal offers in the way of using pure Ruby vs CoffeeScript or, of course, JS.
How would one go about leveraging Opal for Meteor as the primary language for development?
UPDATE: just wanted to share that we have shifted focus over to Volt for our realtime needs in an isomorphic environment that offers Ruby from bottom to top. It has been a fantastic experience and even Matz has tweeted about it a few times now.
I just released an initial version.
This will compile Ruby files to Javascript, but there is nothing meteor specific (yet).
I plan on porting Meteor to a Ruby class at some point, stay tuned or even better submit pull requests...
Yes, check out how the coffeescript package is implemented in Meteor in order to compile .coffee to .js. Specifically, the following
https://github.com/meteor/meteor/blob/devel/packages/coffeescript/package.js - The undocumented _transitional_registerBuildPlugin function which tells meteor how to turn coffeescript files into js files
https://github.com/meteor/meteor/blob/devel/packages/coffeescript/plugin/compile-coffeescript.js - The script that compiles files and generates source maps.
https://github.com/meteor/meteor/blob/devel/tools/bundler.js for how compiled files are served.
If everything is super well designed, you probably shouldn't have to touch the bundler to create a smart package that will build OpalRb files. However, I'm guessing that you are probably going to have to fire off a pull request or two to core in the bundler area in order to get it to play well with your package. Right now, the preprocessor treats all files individually, which may not be possible with your language (I'm not sure.) In the process, however, you'll be contributing to make Meteor's support of other JS dialects and compilers even better!
I'll reiterate my point that Coffeescript seems ideal if you want some sort of high level language for writing JS, especially since it supports in-browser source maps for debugging now.
Maybe a little late on the boat: I wrote a build plugin for Opal in Meteor.
You can find it on atmosphere https://atmospherejs.com/massimoronca/opal https://atmospherejs.com/mikamai/opal
You can install the plugin using
meteor add massimoronca:opal
meteor add mikamai:opal
Every file ending in .rb or .js.rb will be automatically compiled.
You'll have to wrap Meteor builtin Objects, until I'll release a package that does that, you can find a small example on how to do it in this gist https://gist.github.com/wstucco/42392ee21b76dfa3ef83
For example the Meteor global Object can be wrapped in Opal like this
class Meteor
def self.server?
`Meteor.isServer`
end
def self.client?
`Meteor.isClient`
end
def self.cordova?
`Meteor.isCordova`
end
def self.startup(&block)
`#{block.call if block_given?}`
end
end
and used this way
puts "Hello from server" if Meteor.server?
EDIT: moved the plugin under the Mikamai account