Hey all 👋

My name is Sindre, and I am the CTO of a YC-backed startup. For the last 7 years, I have written all my web apps in a programming language (Imba) that works as a clean and fast JavaScript alternative.

In the process of launching a major overhaul of Imba, I wanted to share it with this subreddit, in case anyone are interested in learning more about it. I would love to hear people's feedback as well! All constructive criticism is appreciated!

So, over to the nitty gritty details. Imba compiles to JavaScript and it is meant as an alternative that can give you increased dev productivity. So this is not a toy project or an academic exercise, it is extracted from a real project trying to solve real problems. It has been through countless iterations over the past 7 years, striving to be the perfect language for developing web applications.

In this last iteration, I have added tons of cool things like touch modifiers, inline styles, optional types and great tooling that integrates deeply with TypeScript. With this version I feel that I am very close to my vision for what Imba should be. In other words; it is finally ready for public consumption. I'd wholeheartedly advice you to look into it and give it a whirl if you are interested in web development :)

Check out this video on how to build a counter with Imba in less than 1 minute, or check out https://imba.io for docs and more info :)

• Compiles to Javascript, works with node + npm

• DOM tags & styles as first-class citizens

• Optional typing and deep TypeScript integration

• Blazing-fast dev/build tools based on esbuild

• Advanced tooling with refactoring++ across js,ts, and imba files

Hope you like it, and please share any feedback you might have in the comments!

Edit:

Wow, I would never have expected so many replies and advises. I sincerely thank you all!

I would like to highlight 3 tips that have helped me the most:

• @sdihgusdoiu - Hard Source Webpack Plugin. This plugin was rarely given a mention in other links given what a difference it makes and how simple it is to set up compared to other solutions.
  My mental model: it calculates a hash for Webpack config and package.json. If neither a compilation unit nor the hashes changed, it reuses output of previous builds for that compilation unit.
  This results in a massive decrease in (re)build times. ~70s build became ~5s.
  I wish this would be built into Webpack itself, although I understand there are reasons why not.  
   

• @acemarke - Definitely a subjective hint that many people will dislike: Use eval for source maps in Webpack
  Not only is it by far the fastest option for Webpack to produce, the source it emits is what the browser actually executes. No more brain-dead breakpoint jumps by Dev Tools. Now you are free to copy-paste and play around with code directly from the Dev Tools.
  Yes, it does show an ugly transpiled code instead of your beautified ES6 + JSX, but it sounds much worse than it really is. Much more reliable and predictable than inline-source-map.  
   

• @Retsam19 - for frequently used modules consider exporting them as globals using Expose loader
  Being able to dynamically REPL require(modulePath) for any module seems not to be possible, although there are some Stack Overflow answers claiming it is. I couldn't get them working
   

Original Post:

This post is partly a rant, partly a cry for help, partly an inquiry about any tips and tricks that could improve our day-to-day work.

My company adopted a new, modern JS stack; all pretty standard:

• React

• Babel ES6 + JSX

• Redux

• Mocha

• Webpack

• React Router

• lodash

• along with their 1262 transitive dependencies (I'm not kidding here!)

As a result, my daily productivity plummeted. Honestly, I feel like x86 Assembly must have a friendlier set of developer tools.

A non-exhaustive list of issues:

• We used to laugh at Java guys with their sluggish Maven, at C++ compilation times.
  Nowadays it takes Webpack longer to build a todo app than for a complex Java project to download all dependencies, clean project, compile all files, run all tests, create a package and upload it to repository. npm is even worse

• So...Webpack's hot reload, the mythical feature getting universal praise.
  Apart from the fact that "hot" means "after 5 or more seconds", it comes with the worst of both worlds - sometimes it does work, sometimes it just doesn't; with no indication whatsoever whether it succeeded or not. So you spend 2 minutes figuring out why your fix didn't work, only to find out it hasn't been deployed in the first place. A colleague of mine stated: "I just don't trust hot reload. I always reload the entire page"

• Webpack or Babel or something comes with a special, depression inducing feature: if you make a syntax error in your file, instead of displaying a clear error, it loads some random cached build from half a day ago

• my employer can definitely find a better use for its money than me tracing build bugs of some deeply nested transitive 3rd party library that whimsically has changed it's AMD/UMD exports

• so...source maps. I can see my original sources in Developer Tools! Usually, that is. So, let's try to add a debug breakpoint to my code!
  If you are lucky, it will stay on the line you clicked. Other times, it jumps a few lines up or down. Occasionally, it jumps to the bottom of the file. When developer tools sense that you haven't been frustrated for full 10 minutes, the breakpoint jumps to a 200kLoC app.js file, which freezes the entire Dev Tools and Chrome with it. Now, don't close Chrome at this point! If you do so, the next time you open Dev Tools, it will try to reopen the last session and freeze again. Just wait patiently for 2 minutes till Dev Tools finishes parsing the file, grab a cup of coffee. Actually, an antidepressant might be a better choice.

• you won a lottery and Dev Tools really did stop at your breakpoint. Congrats,. Now, let's inspect some expression. Uncaught ReferenceError: X is not defined. What? Well, Babel thinks the best way to compile this piece of code:
  moment.isDate(...)
  is to translate it to:
  _moment2.default.isDate(...)
  This is done to every ES6 import. And yes, that "2" in _moment2 can and will change to "3" or just disappear, at any point.

• Let's write some tests. Hm...they failed, let's see what's happening. Well, Chrome executes your test before it loads your sourcemaps, so it totally ignores your breakpoints. Remember that 200kLoC app.js file? That's your best bet now.

• One of the best features of Javascript was an interactive REPL console in the browser. But that's so 2014! With Webpack/Babel, it's just not possible to get a reference to a particular module from Dev Tools Console. By design. Because best practices, man!

• On the other hand, we have the 8th Wonder of the World, a time-travelling debugger for Redux. Last time I productively used it was never.

Is this...normal?  

How do you cope it?  

How is this clusterfuck touted as a state of the art in Javascript?  

Did you also become alergic to the phrase

makes it easy to reason about

Repo

Live demo

Node.js enabled typescript imports in v25.2.0 and announced it in their blog. It means there is no more major JS runtime without TypeScript support. Kudos to TypeScript team and best regards

As part of my new year's resolutions I want to get a little less camera shy and I thought I have a somewhat interesting story to share about being the solopreneur owner of a web app. This opens up the possibility to show all the code/analytics etc. without repercussions from any other stake-holders.

In terms of priorities, I wanted to ask you all what topics would you like to see covered? Here are some initial ideas I had. Feel free to add anything you don't see here.

(FYI: The site is a two-sided marketplace selling Word documents )

Coding Topic Ideas

1. generating a maximally enjoyable development environment (e.g. seeding data, simulating cron, mirroring production as much as possible etc.)

2. removing brittleness from integration tests that run on circleci

3. dealing with the shitshow that is sales tax accounting across multiple currencies

4. detecting and recovering from production bugs asap

5. dealing with the real-world mess that is imperfect user input (e.g. when they type emails with a leading space or inconsistent capitalization; when they create a tag that is almost the same as a previous one — like E Guitar vs. Electric Guitar—and now your data is split across two areas)

6. discussing the 8+ year consequences of certain architectural/software design issues

7. streamlining massive amounts of config

8. multi-redundant systems of backup to prevent disaster

9. designing error messages and a logging strategy that speeds up recovery from errors

10. a tour of the most evil, insidious bugs I dealt with over the years (I keep a diary for them)

11. payment systems in-depth (refunds, errors etc.)

12. caching systems for performance

13. Javascript frameworks — why I decided to tear mine out and stick with simple, modular JS.

14. Choosing dependencies that don't come back and bite you in the ass (think about how the JSscape has changed in the last ten years...)

Marketing/Business Topics Ideas

1. how I use data to decide to add/remove a feature

2. AB testing a web app

3. technical SEO (microdata, site structure for internal links, google's tools, sitemaps, etc.) — I get 85% of my traffic (and therefore revenue) from SEO, so I know a thing or two

4. how I use JS and integration tests on all tracking code (critical to get right in my business)

5. auto-email systems to previous customers for extra sales

6. Adwords workflow to drive revenue

7. Analytics workflow to figure out what content working

8. Writing copy that gets sales (what worked for me vs. didn't)