
Show HN: Front-end framework optimized for internal apps - khet
http://getflakes.com/index.html
======
ckluis
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!

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

~~~
jahewson
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
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.

~~~
jahewson
What evidence do you have that people find it easy? My experience with such
forms is that people make mistakes constantly. Just because awful forms are
common doesn't make them easy. I'd argue that there are many easier styles of
form.

Old terminals were fairly space-constrained so I can understand why this
choice was made, but modern computers with their high-res screens do not have
this restriction, e.g the iPhone has a full keyboard instead of a number pad
with letters on, like feature phones had, because they had the space to do so.

~~~
Gigablah
Speaking of the iPhone, input forms in iPhone apps are more or less grid
style.

------
teknologist
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
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
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.

------
snlacks
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
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.

~~~
snlacks
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.

------
toddsiegel
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.

~~~
raziel2p
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.

------
zkhalique
"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](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.

~~~
khet
Good catch, should be fixed now.

------
rrrx3
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?

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

~~~
tracker1
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.

~~~
mhd
I'm generally putting extjs in the swing/MFC/Qt corner, no the
angular/dojo/react/etc one, and yes, compared to that in a client/server setup
it's not that bad -- at least it suggest a more sane communication setup and
is only godawful when it comes to deploying, not outright hostile.

But quite often, some corporations would've fared better keeping their old
mainframe terminal apps. With mobile apps, both setups don't really fare too
well, although with the recent influx of Windows tablets and styluses, I fear
that we could be regressing to shoddy Visual Basic-ish apps with homegrown
comm/sync protocols again.

------
jackweirdy
I really like this which was linked from there:
[http://kumailht.com/gridforms/](http://kumailht.com/gridforms/)

------
thirdsun
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.

------
jordache
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.

------
quartzmo
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/](http://kumailht.com/) Way to go, great looking stuff.

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

~~~
schrijver
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).

------
alanning
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.

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

~~~
khet
Added an MIT license to the Github repo.

------
jimmcslim
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
It doesn't matter if all the company PCs are running the same software.

~~~
jimmcslim
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...

------
languagehacker
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
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
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](https://news.ycombinator.com/newsfaq.html)

2:
[https://twitter.com/kumailht/status/540503967977852928](https://twitter.com/kumailht/status/540503967977852928)

------
waylandsmithers
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.

------
rfc791
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.

------
hwgd
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
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.

------
kbart
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.

------
plow
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.

------
ivan_ah
What about OpenUI5 for business apps:
[https://openui5.hana.ondemand.com/#content/Controls/index.ht...](https://openui5.hana.ondemand.com/#content/Controls/index.html)

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?

~~~
tracker1
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_ah
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 ;)

------
alongnion
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](https://bootstraphunter.com/smartadmin-product.php)

~~~
firefoxNX11
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?

------
krat0sprakhar
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
If you use Bootstrap Sass, you could look into only including the components
that you actually use – can help reduce Bootstrap bloat big time.

~~~
raziel2p
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.

~~~
tracker1
I've always used the Less version myself as a base for customization...
lately, I'll npm it in as a requirement... copy out the bootstrap.less and
variables.less into my project, update the references and work from there.
It's relatively straight forward to do so... from there, I can comment out the
parts I don't use. variables.less is mainly copied as a reference point... In
my app.less, I include the bootstrap variables, then my own variables, then
the rest of bootstrap, then my application less files.

At this point sass doesn't really offer much over less (other than a slightly
stronger presence in the design community). I'm using node mostly, which fits
in better for me, and makes less a better/tighter fit.

For better or worse, being able to bring in less, react and the like combined
with SPDY/HTTP2 will bring some interesting development as things progress.
Right now transpiling ES6/7 stuff to ES5 is probably the biggest bottleneck in
terms of serving applications closer to as-is.

------
b2themax
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.

------
rikkus
Went to this page: [http://getflakes.com/preview/browsing-
data.html](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
I suspect it's not meant to be completely functional.

~~~
khalilravanna
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.

------
pimlottc
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.

------
JelteF
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/](https://morrisjs.github.io/morris.js/)

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

------
Joeri
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.

------
doque
The 'select all' checkbox on
[http://getflakes.com/preview/tables.html](http://getflakes.com/preview/tables.html)
has no effect my Chrome.

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

------
iamtew
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.

------
timme
Bootstrap started out as framework for internal apps.

------
aaronlumsden
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
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
I quite like it. Simple, bare, no excessive styling as opposed to current
trend.

Buttons kind of look out of place, though.

------
taskstrike
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
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....

~~~
taskstrike
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

------
andyl
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?

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

