The Best Tools for UI Hacking (not jsFiddle)(williamnewton.co) |
The Best Tools for UI Hacking (not jsFiddle)(williamnewton.co) |
I don't know why and obviously, this isn't true for everybody, but i'm always at war with CodeMirror. It auto-outdents and reformats things exactly how i do not want them. Whenever i'm forced to use CodeMirror, i'm undo-ing more than i'm typing and swearing about once every 5 seconds.
So, if you are one of those people, like me, that is always getting furious at jsFiddle, try an ACE based alternative.
Interestingly, once you realize that these code-editor components are quite simple to implement on a web-site, you also understand why there are 100+ jsFiddles clones. Most, if not all web-devs should be able to create one in half a day. They may think it's harder before they begin, but they will be pleasantly suprised.
This is likely also, why we're seeing a new "Online IDE" every week these days. GitHub's new Atom.io editor is the first one in a long time, to not use CodeMirror or ACE at its core.
What becomes interesting, though, is taking these ready-built components and trying to improve on the paradigm and the user experience.
With Plunker (which was originally inspired by jsFiddle and some of its short-comings) I've been trying to build tools around the core experience to make prototyping easier for the modern web developer.
Something that you won't find anywhere else is Plunker's package catalogue [1]. What is particularly unique about this is that it allows you to quickly find and 'insert' package dependencies into your markup in a way that resolves dependencies and in a version-aware fashion. These packages can be combinations of js and css. The web-based-IDE lets me take an approach that isn't viable for offline alternatives like bower and component but that is much easier from the user's perspective. A side-benefit of this approach is that all templates on Plunker can be made to auto-update to the latest (matching semver) version when they are opened or on-demand.
As I continue working on Plunker, this is the sort of feature that I hope will help it distinguish itself from the hordes of look-alike clones. Right now, I'm working on a new UI for the editor to allow a more flexible approach to editing files in a column/row grid [2].
I know there are browser extensions that allow Vim emulation, but those are generally more oriented toward controlling the browser, rather than using an editor.
The reason that you may not see this more often is that implementors of ACE may simply not expose the option.
[1]: http://ace.c9.io
I'm learning to code JS in my free time at work and I'm limited to using Chrome, so this suits my needs very well indeed.
Esspecially at the web-development side of things, IDE integration isn't optimal. It's not so much that the languages themselves need better integration; it's the frameworks, and the abstractions and tooling they bring.
When it gets this easy to create a web-based IDE, why even bother trying to develop a one-size-fits-all super IDE? Why not just have a simple IDE that targets one particular framework and its (likely opiniated) workflow? I mean, right now, most of that stuff, targets the command line as their primary UI.
"Wow, plunker seems really nice. You really do make a strong case with the package catalogue."
Thanks!Server-side processing:
If you make a style.less file and link to style.css from your markup, the less will be transpiled by the preview server. This applies to most compiled web languages (including ES6: script.es6.js -> script.js). If something is missing, I'll do my best to add it.
Collaborative editing:
Yes, this is true collaborative editing thanks to ShareJS [1]. However, at the moment, I have an issue hidden away somewhere whereby a streaming session may be corrupted when several users are concurrently editing. I have been unable to boil it down to a reproducible case though.
Some questions though:
Would you consider adding automatic server-side proccessing in the future based on file-extension? For example, compiling .less to .css on the fly?
I think, one of the more interesting directions of a web-based IDE is that they can stop pretending to be a file-editor on a file-system.
I also notice streams. Is this true collaborative editing?