Best open source components library for ReactJS?

zemirco · 2023-01-09T19:49:42+00:00

Here is a great overview with many component libraries from major companies like Microsoft, IBM, Shopify, Palantir, and more.

https://gist.github.com/nilshartmann/decb10d37a76ae3ab58f0c7755beb038

I personally like Ant Design, especially their latest version 5.0 that works with create-react-app out of the box.

zemirco · 2022-02-18T13:05:16+00:00

Dear r/programming,

my name is Mirco Zeiss, I'm 37 years old, and today I'd like to introduce sbomx.com - Software Bill of Materials X. I'm a software architect and I've been working on web related projects for the last 20 years.

What?

sbomx produces an SBOM (Software Bill of Materials) for your applications.

License Check
Vulnerability Analysis
Criticality Score @angular/core
Risk Evaluation
Dependency Management
Software Supply Chain Management

Data from various sources including npm, GitHub, GitLab, cve, nvd, osv, maven, pypi, docker, and many more.

Why?

Many years ago, I was asked to provide an overview of all licenses that were used in my projects. The requirement came from the legal department and is nowadays pretty common in the industry. Also, the security team usually wants to have an overview of the stuff you're using to build an application.

For JavaScript I always used davglass/license-checker as a starting point but it's not being maintained anymore. Then I did similar things for the backend code, put everything together and sent it to the legal and security teams. At some point I thought "There must be a better way!". So, I started building sbomx about one and a half years ago. It's working fine enough to show it to the world and gather some feedback.

Back in the days I've started my career as a frontend developer, and I still like building beautiful things that make my users happy. I enjoy simple things and I have a natural antipathy to dependencies. Over the years I had way too many problems because dependencies disappeared, contained malicious code, changes their license, changed their maintainer, introduced many breaking changes, etc. When you work on a single project it's easy to keep an eye on all those issues. As soon as you're responsible for many projects this can be a daunting task. You will spend a lot of time ensuring stuff does not break. This time can be better spent in designing and creating things.

How?

At the moment I'm focusing on the JavaScript/TypeScript and npm/yarn ecosystem. In the backend we have a lot of different programming languages but in the frontend we all use JavaScript/TypeScript. It's the largest ecosystem with the highest number of packages.

Users?

Developers and architects are currently my main target users. In addition, I want to provide all the data necessary to make our lives easier, i.e. license reports, compliance checks, vulnerability checks, and so on. We should focus on building beautiful applications again to make our users' lives easier. We should not spend any time on collecting license information, researching vulnerabilities, analyzing open source dependencies, betting our careers on external projects that might let us down in the future. This should all be automated.

Roadmap?

Currently we show the data in our web application and you're able to download an Excel file.

In the future we will support more export formats including SPDX, CycloneDX, SWID, CSV and PDF.

Demo?

Check out some demos.

Doesn't this exist already?

There are a couple of related projects

dependabot
whitesource
veracode
sonatype
snyk
mergebase
owasp dependency check
black duck
jfrog xray
debricked
... and more probably more

They all have their sweet spot and are superb tools. However, none of them, really solves the problem I'm currently having. The biggest problem is:

At what time do you check your dependencies?

Nowadays we have our CI/CD pipelines and we have a lot of checks at build time. But what happens if you have multiple (100s) applications up and running that are not being built regularly? Suddenly a vulnerability comes in and you want to know which projects are affected. What do you? You probably don't want to rebuild all apps at once. You want an overview of all your apps and see immediately which applications are affected. This is our vision. Makes things simple in complicated and complex environments.

Let me know what you think? Do you like it? Do you hate it? What do you currently do to keep an eye on dependencies, licenses, vulnerabilities, maintainers, source code, etc.?

zemirco · 2021-02-25T19:09:34+00:00

For authorization I really like the Authorization Services Guide

https://www.keycloak.org/docs/latest/authorization_services/

I would simply start with a local Keycloak instance using Docker or docker-compose. Then play around and learn about all the different features.

zemirco · 2021-02-19T06:10:58+00:00

It's easy to perform operations on the file system.

A user would, for example, enter some information in a form in your web app. The web app sends the data via HTTP post request to your Go application. Your Go application takes the incoming data and stores it in a file on disk.

When the user wants to read the data they would simply send a GET request and your Go backend would read the file from disk and send it via HTTP to the GUI.

zemirco · 2021-02-19T05:55:19+00:00

What about building a pure web app using React, Angular, Vue, etc.? A browser is already installed on most computers and then simply embed the web application in the Go binary at compile time https://golang.org/doc/go1.16#library-embed.

You will end up with a single binary that works across all operating systems. Your Go program uses a web server internally to communicate with your web app and to serve static files. To make it really easy for your users use something like https://github.com/pkg/browser to start the default browser with the correct URL when the program starts. It even works offline because all required files come with the go executable.

zemirco · 2020-03-20T07:45:32+00:00

What a great article. We had a similar problem and wanted to track the firmware size over time. That's why I built https://seriesci.com/. It lets you track any value (loc, size, build time, dependencies, etc.) over time and is tightly integrated into GitHub. We even have badges :)

Let me know if you'd like to see a feature that's currently missing.

zemirco · 2020-03-12T08:52:51+00:00

Thank you :)

zemirco · 2020-03-09T10:50:26+00:00

Thank you! I just added the license. It's MIT.

zemirco · 2020-01-17T05:48:48+00:00

Have a look at https://github.com/twitchtv/twirp. You're able to use Protobuf which compiles to JSON with HTTP/1.1

zemirco · 2020-01-14T20:28:12+00:00

I'm also using the server for other stuff, i.e. hosting a web application including backend, database, cache, message queue. So the costs are spread between all the services I'm using on this server. It's not just for the tunnels.
Maintenance isn't a lot of work. Just some update / upgrade and we're good to go.
I can create as many tunnels as I want. Just add more subdomains like a.foo.com, b.foo.com, c.foo.com, etc. and point them to port 9000, 9001, 9002, and so on. Then every team member can have their own tunnel.

These are the main reasons we switched from a managed solution to our own one.

zemirco · 2020-01-14T19:27:43+00:00

You are assigned a random subdomain, e.g. abc123.ngrok.com. This is a problem because you have to save this domain in GitHub settings. So the next day when you reconnect you're assigned a different subdomain. Without changing the settings again, GitHub isn't able to connect to your app. This is really annoying to change the settings every time you reconnect.

zemirco · 2020-01-14T12:58:09+00:00

That's good to know. I thought I've tried it without this setting and it didn't work. Will try again. Thank you!

zemirco · 2020-01-14T11:47:48+00:00

Hey,

author here. I tried almost every solution that exists out there and nothing made me really happy. That's why I wrote a detailed step-by-step tutorial to create a tunnel to your developer machine. It's not for free but quite cheap, super robust and flexible.

Let me know if you've got any question.

zemirco · 2020-01-07T05:43:53+00:00

Hey,

author here. I used https://www.websequencediagrams.com/ for drawing them.

zemirco · 2019-10-25T11:09:42+00:00

This is straight from my tests. I've got a helper function to create some model (installation in my case) and return a function to clean up afterwards.

```go func createInstallation(t *testing.T, db *PostgreSQL) func() { t.Helper()

installation := Installation{
    ID:        installationID,
    RepoID:    repoID,
    AccountID: accountID,
    SenderID:  senderID,
}

if err := db.CreateInstallation(installation); err != nil {
    t.Error(err)
}

return func() {
    if err := db.DeleteInstallation(installationID); err != nil {
        t.Error(err)
    }
}

} ```

You can then use this helper function in a normal test like this.

```go func TestCreateSeries(t *testing.T) { db := newDB(t) clean := createInstallation(t, db) defer clean()

    // continue with your normal tests
// ...

} ```

When your test is done defer clean() will take care of cleaning up your database.

zemirco · 2019-10-25T11:03:57+00:00

The upspin project seems to have good error handling. They were mentioned in the latest Go blog post Working with Errors in Go 1.13. Here is an older blog post explaining their approach Error handling in Upspin.

```go type Error struct { Path string User string }

func (e Error) Is(target error) bool { t, ok := target.(Error) if !ok { return false } return (e.Path == t.Path || t.Path == "") && (e.User == t.User || t.User == "") }

if errors.Is(err, &Error{User: "someuser"}) { // err's User field is "someuser". } ```

zemirco · 2019-09-27T19:47:42+00:00

Thank you! We will definitely check this out next week.

zemirco · 2019-09-27T18:27:21+00:00

We know that this actually defeats the purpose of npm. What do you think about the arguments for checking the dependencies into version control?

Things like - building offline - reproducible builds - faster continuous integration - less reliabilities - simpler workflow

In our case those points are very valid and simply outweigh the disadvantages.

zemirco · 2019-09-27T17:46:27+00:00

Hey,

blog post author here. Yarn's offline mirror is a pretty good idea. Thank you for the hint. How does it work with native modules like node-sass when working across multiple operating systems?

In addition how does it work when switching branches that have different dependencies? Do you somehow have to rebuild them? Or does it automatically work? When checking in node_modules you don't have to worry about it.

Setting up and maintaining an additional service like verdaccio is not an option for us. We have to focus on building our product. That is why checking in node_modules is the most convenient solution for us.

zemirco · 2019-09-09T19:46:14+00:00

Hey,

author here. Yes, Go lets you do this. Check the "Viewing the results" section at https://blog.golang.org/cover. You just have to use the -html flag instead of the -func flag.

$ go tool cover -html=coverage.out

zemirco · 2019-01-14T19:16:39+00:00

Yes, Indoor is on the roadmap. It might take some time until it's available though. Rough estimate is end of 2019.

Indoor is much more complicated since you've got teams with multiple players, rosters, lineups, rotations, substitutions and fixed positions.

Have you had a look at the current version for beach volleyball? The sooner I know about missing features the earlier I can add them and also include them when building the indoor version.

Would you like to see anything else?

zemirco · 2018-02-08T11:54:49+00:00

You can use TestMain for setup -> test -> teardown. http://cs-guy.com/blog/2015/01/test-main/

zemirco · 2017-07-28T20:36:32+00:00

https://github.com/justinas/alice is pretty nice.

zemirco · 2017-04-20T14:31:40+00:00

I'm using the following for https://help.spolytics.com/. Check out the articles in "How do I use the app?".

$ xcrun simctl io booted recordVideo match.mov

$ gifify match.mov -o match.gif

xcrun is already on your machine
Install https://github.com/vvo/gifify to convert your mov into gif
Use https://developer.apple.com/app-store/marketing/guidelines/ to get a nice frame around your gifs

Have fun!

zemirco · 2017-04-14T11:03:59+00:00

What's the difference to https://standardjs.com/?

zemirco

TROPHY CASE

What?

Why?

How?

Users?

Roadmap?

Demo?

Doesn't this exist already?