8 ms·
I'm Bruno, founder of Abstra (https://abstra.app/ https://abstra.app/). Abstra is a no-code tool that allows designers to build web apps. Imagine Figma, but we
by brunovcosta 5y ago
I'm Bruno, founder of Abstra (https://abstra.app/ https://abstra.app/). Abstra is a no-code tool that allows designers to build web apps. Imagine Figma, but we export a functional web application. Here's a timelapsed demo showing it in action: https://www.youtube.com/watch?v=5fObVcHcd_w https://www.youtube.com/watch?v=5fObVcHcd_w.
As opposed to most famous no-code tools, we don't do any nested-based editing (e.g. tree structure like Webflow - which is an amazing tool, but is basically a visual HTML editor requiring almost the same skills). Instead, we have free canvas-based editing, so we let designers freely iterate as they do with prototyping tools like Figma/AdobeXD/Sketch/etc.
Our visual interface builder lets you add controls using "springs". This is a kind of constraint layout (like XCode/Android studio does) without Cassowary solver (which means more tolerance to inconsistencies). This idea actually came from a master thesis project with my girlfriend where we created methods to simulate elastic material deformations. Then I realized that those abstractions (elastic springs) are easier to understand than the flexbox/grid/box model for UI layout.
Abstra is great for companies that want to make MVPs in production, learn with real data and move faster. We already have a few companies using Abstra. One of them is Stone (Nasdaq: STNE), which uses us to build internal tools faster than coding by hand. Examples of what people have built so far include a customer support portal, a field sales collaborative notes app, financial controls, timesheets, an employee evaluation tool, and a student enrollment control.
- anonymouse008 5y agoI’ve been dying for an AutoLayout for web — can’t wait to try it. Just curious - at what point does someone “grow out” of this tool? When you say Abstra is great for MVPs in production, I assume there’s a next level not served by this tool?
- brunovcosta 5y agoGreat, thank you! The next level is "complex apps" because code is still a better way to create customized abstractions. That said, you can scale simple/CRUD applications with Abstra for tons of users without having to mind about infrastructure
- nimbix 5y agoIsn't AutoLayout in Figma just a partial implementation of flexbox, an therefore already exist on the web in a more complete form?
- brazzledazzle 5y agoThis looks pretty neat. Just wanted to give you a heads up that the word "regulamentation" might be a typo in your docs here: https://docs.abstra.app/#security-by-default https://docs.abstra.app/#security-by-default Even outside of that word the paragraph itself reads kind of weird: "The Abstra team makes all the necessary effort to make your project secure and compliant with all the actual rules, good practices, and regulamentation." I took a stab at changing it: The Abstra team is dedicated to securing your project in compliance with rules, regulations and standards using industry best practices. Not sure if that jibes with the legal side of things but I think it reads better.
- samstave 5y agoThat does read better, however I like the portmanteau of "regulatory + documentation"== 'Regulementation' The NSA hardening docs could count as such...
- brunovcosta 5y agoThank you! We will change that!
- samstave 5y agoWhats your email plz (put it in your profile)
- brunovcosta 5y agoGood call! done! bruno [at] abstra.app
- villasv 5y ago> Then I realized that those abstractions (elastic springs) are easier to understand than the flexbox/grid/box model for UI layout. I think so too! I enjoyed using Bootstrap precisely because my mind treated those auto-layout 12 columns as equally elastic springs, but this abstraction leaked very frequently. Really cool to see such notion embedded into a layout builder.
- brunovcosta 5y agoThank you! I think there always an abstraction bias that makes webdev frameworks so coupled with HTML. Great to hear that you liked!
- mooncoffee 5y agoThis tool looks very interesting
- brunovcosta 5y agoThank you!
- adrirb 5y agoWow it looks very easy to use
- brunovcosta 5y agoThank you!
- franciscomello 5y agoThis looks really cool.
- brunovcosta 5y agoThank you!!
- nirali35 5y agoThis looks amazing! Curious to know what stack you are using to build the frontend. I am starting to build a video editor, so just curious if any framework (React, Vue) or library were especially useful?
- brunovcosta 5y agoThank you! We are using Vue+Typescript for the frontend and Haskell & Node for the backend microservices. For your case (and maybe for us in the future), I would take a look at rust+webasm or using WebGL directly
- nirali35 5y agoThanks, currently I am also using Vue and doing simple DOM manipulations. Any specific Vue libraries you found useful for drag-n-drop, alignments, connecting arrows, etc?
- brunovcosta 5y agoWe saw limitations on all libs we tried, so we decided to implement drag-n-drop by ourselves using setIntervals, getBoundingRects and absolute positions for arrows and other visual elements
- dlojudice 5y agoamazing product! i'm looking forward to test it
- brunovcosta 5y agoGreat, thank you! If you have any questions or thoughts about our tool, you can contact me (bruno [at] abstra.app). I would love to get your feedback on it.
- mwcampbell 5y agoCongrats on the launch. Have you tested the generated UI for accessibility, particularly with a screen reader? If I can try a finished demo app without going through the design process myself, I'd be happy to provide feedback.
- brunovcosta 5y agoYes! We have a customer which have blind users. So we are prepared for this! Here is a quick demo: https://accessibility-demo.abstra.app/ https://accessibility-demo.abstra.app/
- mwcampbell 5y agoNot bad! The only slight problem I noticed is that NVDA (a popular open-source screen reader for Windows) announced that the plain text above the edit box was clickable.
- brunovcosta 5y agoExcelent feedback! We will fix that!
- powerlogic31 5y agoGreat work. I'm not a power user of figma but I've dabbled with it. I think abstra controls for connecting backend is great. the front is a bit hard to use for me. I wish it was more canvaish than figmaish. The contrast for the buttons could be better, why is the box color smaller than the shadow color in the properties?, also why i cant find the width and height properties so i can put it manually. just some feedback. thanks for all your hard work.
- have_faith 5y agoI couldn't find any live demos of webpages built with it, is there any examples?