5 ms·

Airframe – Open-Source Dashboard Template

144 points by metamet 7y ago

jermaustin1 7y ago
This looks really nice, but MY GOODNESS, there are a lot of dependencies!
- deleted 7y ago
  [deleted]
- mcondit 7y ago
  It is after all a full template. Looking over the deps, including reactstrap is a bit extra baggage, but overall it's everything that you'd ultimately need to make an application in the ecosystem to do what it's offering, seems robust.
timw4mail 7y ago
A front-end Javascript build chain for a template? No thanks.
- sjroot 7y ago
  I think the term "template" is a bit misleading; this is a fully functional project. You can rearrange views as necessary and wire them up to your own APIs, and you'll be good to go.
- 0wczar 7y ago
  all versions (next/angular/jquery/vue/mvc) will be available as open source soon.
  - evsasse 7y ago
    Looking forward for jquery.
    - throw03172019 7y ago
      I haven’t heard anyone say this for quite some time!
fnord77 7y ago
This is great. it takes a lot of effort to build a nice UI. someone building out a data-centric product could use this and focus on their backend business logic/processing.
rayshan 7y ago
For a large-screen-centric, all-batteries-included React UI component library, I love Palantir's Blueprint: https://github.com/palantir/blueprint https://github.com/palantir/blueprint
- mlevental 7y ago
  yup. as odious as palantir is blueprint is fantastic - beautiful, complete, and well documented.
ideashower 7y ago
Can someone walk me through how I can set up the data to plug into this dashboard? If I had a series of CSVs, how simple would it be to just attach it to these visuals?
- Braxton_Hicks 7y ago
  You'd probably need some programming experience, or at least a general idea of how web development works. This dashboard template is front-end fluff that makes it simple for a developer to focus on the backend processes and allows them to pass resulting structured data to the client that's presented in pretty tables and charts. There are multiple ways to accomplish your CSV challenge, depending on your backend structure, but one possible could be to use a tool such as the jQuery CSV plugin[1] to read your CSV files and convert them to Javascript objects. You could then render your HTML by iterating over the rows of that CSV in a <table> element. The Airframe source would provide all the the CSS needed to display your table in one of its pretty formats - would just be a matter of setting the table and its children's class attributes[2]. [1] https://github.com/typeiii/jquery-csv https://github.com/typeiii/jquery-csv [2] http://dashboards.webkom.co/react/airframe/tables/tables# http://dashboards.webkom.co/react/airframe/tables/tables#
GordonS 7y ago
This looks really good! Another one I've used in the past is CoreUI[0], but I think Airframe looks a bit more "modern", or perhaps a little less "Bootstrappy" (that's a good thing). [0] https://coreui.io https://coreui.io
tedyoung 7y ago
Looks nice, but not quite responsive enough to lay out properly on an iPad.
h1d 7y ago
Can we stop with "Loading, please wait" screen? This isn't some game that needs to load 3D environment and sites loaded faster 15 years ago that had similar functionality but why are we going backwards after so long? One page trapped all the swipe gesture to move the cards around I couldn't even scroll back to top to get back to the side menu.
- cmroanirgo 7y ago
  Exact same problem here. 8 second "please wait" which led to the same scroll lock. Perhaps this project is a little premature.
wayneftw 7y ago
Looks great! Just curious - What do you need to do with babel/webpack et al. that Create-React-App or Next.js can't do?
0wczar 7y ago
NextJs now is available: https://github.com/webkom-co/airframe-next https://github.com/webkom-co/airframe-next

144 points by metamet 7y ago

jermaustin1 7y ago

This looks really nice, but MY GOODNESS, there are a lot of dependencies!

deleted 7y ago
[deleted]
mcondit 7y ago
It is after all a full template. Looking over the deps, including reactstrap is a bit extra baggage, but overall it's everything that you'd ultimately need to make an application in the ecosystem to do what it's offering, seems robust.

timw4mail 7y ago

A front-end Javascript build chain for a template? No thanks.

sjroot 7y ago
I think the term "template" is a bit misleading; this is a fully functional project. You can rearrange views as necessary and wire them up to your own APIs, and you'll be good to go.
0wczar 7y ago
all versions (next/angular/jquery/vue/mvc) will be available as open source soon.
- evsasse 7y ago
  Looking forward for jquery.
  - throw03172019 7y ago
    I haven’t heard anyone say this for quite some time!

fnord77 7y ago

This is great. it takes a lot of effort to build a nice UI. someone building out a data-centric product could use this and focus on their backend business logic/processing.

rayshan 7y ago

For a large-screen-centric, all-batteries-included React UI component library, I love Palantir's Blueprint: https://github.com/palantir/blueprint https://github.com/palantir/blueprint

mlevental 7y ago
yup. as odious as palantir is blueprint is fantastic - beautiful, complete, and well documented.

ideashower 7y ago

Can someone walk me through how I can set up the data to plug into this dashboard? If I had a series of CSVs, how simple would it be to just attach it to these visuals?

Braxton_Hicks 7y ago
You'd probably need some programming experience, or at least a general idea of how web development works. This dashboard template is front-end fluff that makes it simple for a developer to focus on the backend processes and allows them to pass resulting structured data to the client that's presented in pretty tables and charts. There are multiple ways to accomplish your CSV challenge, depending on your backend structure, but one possible could be to use a tool such as the jQuery CSV plugin[1] to read your CSV files and convert them to Javascript objects. You could then render your HTML by iterating over the rows of that CSV in a <table> element. The Airframe source would provide all the the CSS needed to display your table in one of its pretty formats - would just be a matter of setting the table and its children's class attributes[2]. [1] https://github.com/typeiii/jquery-csv https://github.com/typeiii/jquery-csv [2] http://dashboards.webkom.co/react/airframe/tables/tables# http://dashboards.webkom.co/react/airframe/tables/tables#

GordonS 7y ago

This looks really good! Another one I've used in the past is CoreUI[0], but I think Airframe looks a bit more "modern", or perhaps a little less "Bootstrappy" (that's a good thing). [0] https://coreui.io https://coreui.io

tedyoung 7y ago

Looks nice, but not quite responsive enough to lay out properly on an iPad.

h1d 7y ago

Can we stop with "Loading, please wait" screen? This isn't some game that needs to load 3D environment and sites loaded faster 15 years ago that had similar functionality but why are we going backwards after so long? One page trapped all the swipe gesture to move the cards around I couldn't even scroll back to top to get back to the side menu.

cmroanirgo 7y ago
Exact same problem here. 8 second "please wait" which led to the same scroll lock. Perhaps this project is a little premature.

wayneftw 7y ago

Looks great! Just curious - What do you need to do with babel/webpack et al. that Create-React-App or Next.js can't do?

0wczar 7y ago

NextJs now is available: https://github.com/webkom-co/airframe-next https://github.com/webkom-co/airframe-next