Show HN: Front-end framework optimized for internal apps

by khet • 12 years ago

438 93 12 years ago

jchendy• 12 years ago

Is there any compelling reason to try this if I'm already comfortable with using Bootstrap for internal apps?

schrijver• 12 years ago

I guess it’d be good if the website mentions a bit more what are the differences with and advantages over Bootstrap. I’ve never used Bootstrap for public facing app because I find its look too bland, but I love it for internal apps. IMHO it doesn’t exaggerate at all on the level of ‘glitz’ (one of the arguments of the OP against contemporary frameworks).

krat0sprakhar• 12 years ago

This is a pleasant change. My goto framework for internal apps is Bootstrap (no surprise there) although I actually end up using only a handful of elements. Flakes looks like a good enough collection of elements to cover 95% of my use cases. Definitely going to use this in my next app.

Thanks for sharing!

sensecall• 12 years ago

If you use Bootstrap Sass, you could look into only including the components that you actually use – can help reduce Bootstrap bloat big time.

raziel2p2• 12 years ago

Why single out the SASS version? If you compile LESS files you have the same option. I also think Bootstrap has a form on its website which compiles the CSS with the components you want, without having to install/run a preprocessor.

ckluis• 12 years ago

Nicely done, but if you are really trying to be a framework for internal apps (vs a design framework like bootstrap) - I would focus on adding a couple of more admin-like components (such as grids vs tables with the options associated with grids).

An opinionated admin framework would be a huge win. For what its worth - semantic-ui.com has a couple of neat compenents that are also worth having (cards, steps/wizards).

Watching this project now!

rrrx37• 12 years ago

I'd like to understand more about the rationale that led you down the path of creating this.

In my years in enterprise, user and market research has driven the push to create UIs that are more compelling, that make users feel more at home and comfortable (as they would be with mobile and consumer products), while maintaining a more narrow focus on tasks instead of providing a generic one-size fits all paradigm.

This framework stands in contrast to that, making things dull and boring. What caused you to go down this path?

mhd5• 12 years ago

I'd like to work in that progressive sector of the enterprise, mine is still full of Swing, extjs and even Tk.

tracker14• 12 years ago

extjs isn't so bad.. My only complaints would be all the themes look a bit dated (and squashed on a large display), and I don't like OO paradigms in JS so much and ext is really heavy OO.

rrrx37• 12 years ago

as much as i'd like to say the opposite, it's not nearly as progressive as it should be. There are tons and tons of places who are actively regressing.

whizzkid• 12 years ago

I actually think the opposite.

The way it is built is just perfect to get used to automation of hands. You have the feeling right away that you can use "tab" and "space" to change/fill/move things in those.

Putting more fancy things and making it not "boring" is not an easy job and most of the time fails i think.

"make users feel more at home" will lead users to be focusing less time on the actual task and more time on the tool, isn't it ?

Apart from what this framework does (didn't have time to play much), I congratulate the UX guys on this project for choosing this kind of design and behaviour.

They could have totally another idea maybe for going this path but i love it.

rrrx37• 12 years ago

The research shows that there should be a greater convergence because of the cognitive dissonance that occurs otherwise. It is an inarguable fact that people are using software in all aspects of their lives - to have a simplified, straightforward experience in one instance and not the other is a huge source of frustration. I'm not trying to insinuate that making things "not boring" and simplifying is in any way easy. There are plenty of consumer apps that get this totally wrong.

As far as "making them feel more at home" - the more comfortable a user is with an application, the less likely they are to make mistakes. The less mistakes, the more efficiency. The more efficiency, the either: A) less time spent in the application (for ad-hoc, or get in and get out applications - a common staple) or B) more tasks accomplished (for bread-and-butter, run the business, 24/7/365 applications)

I want to be clear - I think that what has been built is an excellent job wrt technical implementation.

However, the driving design justification seems wholly contrary to the direction the industry is (trying) to move toward.

Cthulhu_• 12 years ago

My first assignment at my current employer was a short-term, fixed-price project where we had to create a rather boring internal web application that just showed some tables and sent off some pre-made requests to certain endpoints. The UX wasn't high on the priority list, and TBH I wish I had something like this back then, since we had to build our own, then send it off to some cheap designer that came back with shudder light blue gradients. I'd totally go for straight and sleek (and boring) like this project next time.

mhd5• 12 years ago

Never mind that if "boring" isn't the wanted option, the alternative is probably pretty much dominated by corporate identity anyways, where a blank slate is better than some involved design (e.g. gradients, desktop-like 3D look or material design).

forgotAgain• 12 years ago

From my experience I disagree. Simpler and well known are more welcome in the enterprise and business in general. As an example consider the protests raised about the Office 2007 ribbon. An internal application cannot afford that type of resistance.

If you had said simpler and more efficient interfaces I would have agreed. Current ERP and CRM applications try to put too much in front of the user at one time. It's better to have micro-applications that match a particular function. This looks like a good idea for that.

rrrx37• 12 years ago

I think you misunderstood my post. Everything I've seen does push for simplicity. But simplicity doesn't manifest itself here... datagrids are not simple, no matter how clean the lines are. Nor are forms without inherent rules about use and context. Data saturation and semantic satiation are both immense problems in the enterprise.

forgottenpass• 12 years ago

How can something be both compelling and at home/comfortable? If you're using the definition of compelling that you appear to be, they're concepts on opposite sides of the same spectrum.

This framework stands in contrast to that, making things dull and boring.

Dull and boring sounds UI to me exactly like at home and comfortable. Compelling sounds like the day to day trend hopping that we see all the time. The frantic activity means it can pick up usability and interaction improvements at a faster clip, but that's a byproduct.

But the entire reason for this conversation could have little to do with Flakes' decisions and be more reflective of the way design will overloads existing words with new vague meanings and create statements that are illegible to people not versed in the existing narrative.

rrrx37• 12 years ago

"Compelling" refers to aesthetics and feeling of reward when using the application - "This is an attractive application that makes me feel good when i use it", while "at home & comfortable" means supporting the perpetual novice, allowing easy correction of errors, and lessening complexity - "I can make changes confidently without fear of fucking up because I know what all of these controls do and how they work." The two ideas are most certainly not at odds with each other. To put it bluntly, this framework does neither. It's a plain "business skin" on some well-worn but generally unusable interaction patterns, as I mentioned in an earlier comment.

jackweirdy• 12 years ago

I really like this which was linked from there: http://kumailht.com/gridforms/

josekpaul• 12 years ago

I really like gridforms for dense data-entry forms (http://kumailht.com/gridforms/).

tracker14• 12 years ago

Agreed, was coming in here to comment on as much. I don't think anything on the demos really stood out quite as much as the grid forms does. It's closer to what people who might be replacing a paper form would probably like.

Whenever I'm designing a system that is replacing paper, though it's been a long while. I find it best to start with as close to the paper version as practical. There's a lot to be said for making something that is familiar.

wldlyinaccurate• 12 years ago

Kumail Hunaid, who made Grid Forms, is also the creator of Flakes.

jahewson2• 12 years ago

I don't like them at all. Yes, they look pretty, but it's an emulation of the worst aspects of paper forms. The grid-style form is my least-favourite paper form and I frequently find it confusing and difficult to fill out such forms correctly. Perhaps this is because the linear flow of the form is awkwardly two-dimensional, or perhaps because for anything beyond a trivial example, the layout becomes unnatural as the size of the fields don't usually lend themselves to a logical and human-friendly structured layout.

Perhaps it's because the grid style form ignores the importance of whitespace in clear and understandable design. Here's a good test: hold the form upside down and see if you can still tell it's structure at a glance, or hold it at the other side of the room and try the same thing.

hyperbovine• 12 years ago

Be that as it may, this is exactly the type of form I routinely see people filling out on 80s-era WYSE terminals at airports, rental car agencies, the DMV, hardware stores, and so on. It seems like a lot non-tech people find them fairly easy to get the hang of.

insin• 12 years ago

Was coming here to say the same earlier, but I liked it so much I've now hacked together a sweet DSL to use it with my React form library.

Rendering demo: http://insin.github.io/newforms-gridforms/

DSL example: https://github.com/insin/newforms-gridforms#usage

bjoe_lewis• 12 years ago

I tend to like typeform more, for anything form-like. (http://www.typeform.com/)

scottschulthess• 12 years ago

"With grid forms, lengthy forms can easily fit above the fold. Which means less scrolling. "

Seems like a bad idea to me whenever designs attempt to "Fit stuff above the fold". Scrolling is a lot better, and I think it's better to present users with a portion of the information at a time and allow them to progress through a long form in a linear fashion. Vertical scrolling > horizontal progression.

zkhalique• 12 years ago

"It goes away with custom fonts" should be "It does away..."

Other than that, pretty cool! There may be a space for this...

Reminds me a bit of http://platform.qbix.com which we built to power social apps (on all devices).

One tip: if you're going to make it for business, have the demo document the keyboard shortcuts to get around quickly, like in gmail. Ideally your "front end framework" could have a controller that would accept a keymap object like {"a": "actionName", "r": "someOtherAction"} etc.

khet2• 12 years ago

Good catch, should be fixed now.

ivan_ah2• 12 years ago

What about OpenUI5 for business apps: https://openui5.hana.ondemand.com/#content/Controls/index.ht...

From my initial tests, it's very clean MVC (a bit verbose). Also the deploy story is not too good... (frontend code ships as a .war). Does anyone have experience with this, good or bad?

tracker14• 12 years ago

It's relatively clean, but a bit more klunky feeling. It also seems REALLY sluggish... Not sure if this is typical, but it really doesn't feel nice.

I'm also not a huge fan of enterprisey software development.. SAP and most Java projects make me pull my hair out just getting an environment for development setup.

ivan_ah2• 12 years ago

Yeah the other day was my first day with Java and Eclipse and I was close to pulling my hair out (coming from python and vim). Ultimately it's just a different set of batteries but the depth/weight of the stack seems insane---the expression 'house of cards' comes to mind...

Still OpenUI5 is just js files in the end, so hopefully entreprisey people can't mess it up too bad ;)

infinite_snoop• 12 years ago

I'm doing a lot of SAP/OpenUI5 development at the moment and performance seems good. I believe the .war is only needed as a one off if you need to deploy the UI5 libs to a Java server? I'm deploying to SAP systems which already host the libraries so I haven't had that issue. One click deploying from Eclipse is built into the UI5 plugin.

UI5 obviously has the weight of SAP behind it (be that for good or bad!) and new releases seem pretty frequent. For developing web apps to consume SAP data at least it seems the obvious choice (it's very much geared towards consuming oData which SAP Gateway provides).

toddsiegel• 12 years ago

This is really cool and a nice start. One big thing we are dealing with in our internal app are responsive tables. We display some data in tables, but it almost always looks like crap on a small screen. There are a few different ways to solve this. Sometimes it makes sense to hide or abbreviate columns other times the table should neatly convert to a list. This is tougher.

I also like your search & filters design. I did something like this just last week, but I like yours better. ;-)

In some places you use semantic class names, like for messages, but for buttons you use colors. Probably better to just stick with a single convention for consistency.

mhd5• 12 years ago

I think this is one area where we're going to see some changes even in the enterprise sector. Your average data-grids are pretty familiar to those used to working with spreadsheets, but pretty much everyone is used to rich list views, who also have the benefit of being a bit more responsive (not as good for editing data, though. Although with those gridforms, I do wonder...)

Granted, one screen isn't as heavy with data, but if you're trying to survey that much at once, you'd probably benefit from richer tooling anyways. I'd almost bet that a design that degrades gracefull from data grids to list views will have users resizing their browsers or picking portrait mode to get out of that.

raziel2p2• 12 years ago

I think colours for names of buttons are OK. I hate having to jump between CSS frameworks and trying to remember what the correct class is - danger? Warning? Error? I know what I want is red, and any time I want to change the class of a button or message/alert your core intent is to change the colour - so you might as well skip that abstraction IMO.

pearjuice• 12 years ago

Can't wait to get a good taste of this flavor of the month.

jordache• 12 years ago

Great start!

One thing that I noticed immediately was the UX associated with the hamburger menu.

When the page content gets sufficiently long, you have the potential of scrolling beyond the hamburger menu. To jump to another page, you have to scroll to the top.

Potential solutions could be making the hamburger menu fixed to the upper-left corner, or provide UI widget to return to top of page.

timme• 12 years ago

Bootstrap started out as framework for internal apps.

JelteF• 12 years ago

I think it's strange that they use Morris.js[1] for their graphs on the main pages, but don't mention it anywhere.

[1]https://morrisjs.github.io/morris.js/

ricardobeat• 12 years ago

The graphs don't appear to be part of the framework, just example content.

rikkus• 12 years ago

Went to this page: http://getflakes.com/preview/browsing-data.html

The 'Next' button on the grid seems to be broken. No javascript error in console. Current stable Chrome, Windows.

buckbova• 12 years ago

I suspect it's not meant to be completely functional.

khalilravanna• 12 years ago

Yep. Looks like the only thing with any functionality attached is the search. Which is funny because with the search at the top of the page I could see how it would lead one to believe that the rest of the buttons might have functionality attached to them as well.

doque• 12 years ago

The 'select all' checkbox on http://getflakes.com/preview/tables.html has no effect my Chrome.

philodespotos• 12 years ago

Nor in any other browser; AFAICT there's nothing actually bound to that. It's just to demonstrate styling.

snlacks2• 12 years ago

I wish more things looked like this at work. There's apps that look like native apps, there's bootstrap apps, there's all the custom CSS floating around, there's whatever's new, there's the stock CSS sheet that comes with the plugins...

Keeping to principles like this at work or for work environments would make it so much easier to have unity. I'm not saying everything should look like this, but that not everything needs to stand out for the sake of standing out. Using the same app every day undoes the need for over the top "visual cues" and complex overlays and material concepts. We need fast, interchangeable stuff, that works with large amounts of data/fields/etc when the content doesn't fit looking like apple.com. :)

I wish you guys luck, and I'll give it a shot the first chance I get.

kylestlb• 12 years ago

I work at a very large company and it's the same way. We have a team dedicated to keeping internal apps within certain stylistic and functional guidelines but the overall landscape is still an absolute clusterfuck. Some apps are built with bootstrap, some with pure, some with no styling whatsoever, different hexes for our company's primary color... you name it. Fragmented as all hell.

snlacks2• 12 years ago

It's amazing in an "Agile" world, we still feel like we need to "configure" basic design concepts.

For internal apps: Structure could be one theme on one CSS framework. So much time is wasted on "design" (picking colors, lining things up) by people who don't know anything about design.

alanning• 12 years ago

Very nice work. Given the prevalence of Bootstrap and Foundation, it would probably help adoption if there were options with those as the base styling lib.

I know there is a lot of work in the custom sass here and this is currently a one-man project. May be a good candidate for a "Roadmap" and "How you can help" section in the repo's Readme.

aaronlumsden• 12 years ago

Am I missing something here? I don't get what's so special about this as opposed to all the other web app frameworks?

infinitone• 12 years ago

It makes sense if you've ever had to work on internal facing apps, like an admin panel. You wouldn't want the overhead and clutter of something like bootstrap which'd be overkill (albeit you can customize it to be minimal).

Ronsenshi• 12 years ago

I quite like it. Simple, bare, no excessive styling as opposed to current trend.

Buttons kind of look out of place, though.

teknologist• 12 years ago

I feel internal business applications can be visually appealing too. People have to look at these things all day, so why are we so quick to assert that these people are practically robots who can't appreciate comfortable interfaces when we design and build boring apps?

Life can look good all over. Don't succumb to this "business is serious and should therefore be dull and boring" stuff.

xanderstrike• 12 years ago

I think they're going for a different kind of boring than what you're implying. It doesn't have fancy animations and flashy colors like Bootstrap and Foundation. It's simple, clean, fast and straight to the point, which is something valuable in an internal tool.

akx• 12 years ago

Bootstrap doesn't have animations, not that I know of, and I think its colors (though kind of cliché by now) convey information pretty well.

cle• 12 years ago

That's not why people make boring business applications. It's because they've decided that making it pretty does not add enough value to justify the costs.

In my opinion, the design importance grows with the number of users.

ericcumbee• 12 years ago

I somewhat agree, in a previous job, one of the products I supported was Sharepoint. Which when you have the Document Management features, work flows, and Infopath forms is a really powerful tool. But sharepoint had a reputation on campus of being annoying and hard to use, and I think a lot of that came from the technical team that originally implemented it got somethings wrong to start with. But those of us in the customer service departments, who were tasked with building services for our customers on top of sharepoint, focused to much on making it technically functional and not functional and easy to use from a user perspective. I'd say if some of the UI bits in our sharepoint services looked more like this and less like what we provided, then Sharepoint would have been a much eaiser sale. It would also have probably helped the resentment from users when we told them that "No, because of the type of information this is, we can't put it in google drive or Google Forms".

nnnnni• 12 years ago

I think that it looks clean and like it'd be easy to look at all day than something that's flashy.

thirdsun• 12 years ago

This is great - I'm working on internal webapps full time and I often notice how data-heavy apps with high density of information come with their very own challenges that make Bootstrap, Foundation and Co. less of an ideal choice. What looked great in a simple demo, suddenly feels cluttered in boring data grids. Often it turns out that adapting these frameworks to our own requirements, visually and in terms of functionality, is more of a hassle than simply starting from scratch. Which is what I started to do lately.

This, however, seems like a great starting point that I will definitely keep in mind for future projects. I'll need to check how easy it will be to customize and extend it, but it's a great first impression.

quartzmo• 12 years ago

I'm really glad I checked out this posting because it led me to the author's other work, which is really impressive. http://kumailht.com/ Way to go, great looking stuff.

Joeri• 12 years ago

Am i missing something, or is there no explanation anywhere on their site of what this actually does at a detailed enough level targeted towards a developer?

Update: never mind, found the docs hiding inside the live demo page.

andyl• 12 years ago

This looks great. I'd like to know: 1) how does this differ from bootstrap? 2) why a whole new framework, instead of extending bootstrap?

languagehacker• 12 years ago

Lots of nice work put into this, but I think some of the fundamental architectural assumptions are a little regressive. For instance, it looks like the boilerplate expects a lot of server-side template rendering, or minimal dynamic rendering on the front-end. Also, using jQuery and event-oriented JS in general is nice and stable and easy to grok, but in my opinion not forward-looking.

I think the front-end world is going more in the direction of single-page apps that primarily use the server side for data-driven APIs. The server-side APIs become way more portable, and the user experience becomes far more responsive. Just because something is internal doesn't mean you don't want data portability, high responsiveness, and low latency.

I respect the fact that the approach is opinionated from a front-end perspective. But to counter an opinion with another opinion, data portability and reduced latency from the server justifies all the fuckery associated with many of the SPA frameworks (looking at Angular when I say fuckery). This framework encourages people to stick to the skills they were comfortable with five years ago, and untempered complacency is never a good thing.

gfodor• 12 years ago

One man's "forward looking" is another man's "swept up in the latest trends." This framework seems to be pushing back against trends on the design front, so unsurprising it's pushing back on trends in the architecture front as well.

reledi• 12 years ago

khet, you may not be aware but you're violating an HN rule by asking others to upvote your submission [1, 2].

1: https://news.ycombinator.com/newsfaq.html

2: https://twitter.com/kumailht/status/540503967977852928

rMBP• 12 years ago

License? Scanned both the github and docs for any mention of it.

khet2• 12 years ago

Added an MIT license to the Github repo.

pimlottc• 12 years ago

There's some nice visuals here but it's hard to see why I should choose to invest my time into learning this rather than something more standard like Bootstrap. And I don't really see how any of this is specifically oriented to internal applications.

b2themax• 12 years ago

I think it looks sharp. But the monotonality, or lack of contrast within the layouts blends elements together, so I would find it difficult to read and interact with for an extended period of time. It is very cool, I especially like the Grid Forms -- those are so sweet.

jimmcslim2• 12 years ago

Everytime I see a new CSS framework with a grid layout (which they all do) I get sad that decent cross-browser support for the CSS Grid module seems so far away...

chm• 12 years ago

It doesn't matter if all the company PCs are running the same software.

jimmcslim2• 12 years ago

I'm thinking about it from the perspective of an ISV that wants to deliver a app with a web interface that is run on in-house servers. Although we could probably just target the capabilities of IE (which does support an early version of the CSS Grid spec) and be done with it...

alongnion• 12 years ago

I prefer something more feature-rich, using a known framework like Bootstrap. There's a lot more features and examples built in to inexpensive templates for Admin interfaces like SmartAdmin - https://bootstraphunter.com/smartadmin-product.php

firefoxNX11• 12 years ago

Great point. From perspective of someone deciding between using bootstrap themes vs flakes the decision would be based on whether you want bootstrap or not. What I don't get is why would you NOT use bootstrap or material design and pick something like getflakes? The justification that it's for internal apps - apps which don't have proper budget allocations, need to be done quickly with usability short cuts? I guess that does happen a lot for internal apps. But why would you not build getflakes using bootstrap or foundation?

rfc791• 12 years ago

Well done. I work in a large enterprise and have no design ability. Tired of banging bootstrap together and not quite getting the look you achieved with Flakes. Looking forward to trying this.

taskstrike2• 12 years ago

Just wanted to mention that I work on NimbusFoundry(nimbus foundry.com) which has similar ideas except we focus on auth, storage of data, and permissioning instead of front end. This is so that users can create apps within enterprise environments like Google apps for business easily.

kiwidrew• 12 years ago

Very cool - I like your idea to store all of the data using a Google Drive realtime document. But I'm not sure how you are able to handle authentication and permissions, e.g. limiting a field/model to only be visible to certain users. AFAIK read access to a document in Drive is all-or-nothing, and there doesn't seem to be a way to let a user only view a portion of the document. Are you only enforcing the access control in the client-side logic? If so, that's not even remotely secure....

taskstrike2• 12 years ago

By permission, we mean that each team's data is hosted on a single document, and when you add a member, they can see both the data in the app and also binary files associated with that data. We don't try to do differing levels of permissions not supported by google

hwgd• 12 years ago

Not sure why Bootstrap bloat is a problem if it's just going to be an internal app. I'd rather go with a more familiar, and well known framework, and not have the overhead of learning yet another framework (not to mention others who would maintain or contribute to the internal app would have to pick up this new framework)

That being said, I do like the look and feel of Flakes. Also, given that graphs and charts are key to internal business apps, would be awesome if there was some easy charting integration / capability.

vertex-four• 12 years ago

Bootstrap bloat has little to do with it, looking at the docs. This gives you a bunch of components for specific data views; Bootstrap is far more general, requiring you to create your own components out of Bootstrap's lower-level CSS. It's a specifically geared framework vs a general one.

plow• 12 years ago

The 'consumerisation of the enterprise' is here to stay. Having a USP that is a negation of something beneficial and pleasant in UI pleasantness and that drives adoption is likely only to work against the success of this framework, let alone the narrower only 'internal' market reducing the role of the open source community in its continued development and their passion for it.

kbart• 12 years ago

I'd called that "lean and clean" instead of "boring". And I wish that more user facing apps would look like that, not just internal ones. Maybe it's just me, but all these flashy things, unnecessary effects, animations only clutters the screen and makes app harder and annoying to use. Functionality and ergonomics is all that usually matters. Well done, I'll give it a try.

iamtew• 12 years ago

Looks very nice. I've been busy trying to make a dashboard for work with overview of various systems, I will definitely give this one a try.

waylandsmithers• 12 years ago

Some feedback about the preview section:

/preview/typography: I was hoping to find out what font(s) I was looking at, but this page contains a history of typography. Looks like it's Helvetica? But I don't see the word Helvetica anywhere on the page. Maybe it's expected that the user will know why Helvetica is the right choice.

from /preview/grid : "A collection of classes to build grid based layouts with absolute ease. This is the simplest grid system you'll love to use." This feels weirdly sales-y for documentation.

Show HN: Front-end framework optimized for internal apps

Related Stories