Component-Oriented UI

[btzr-io]

Simplify UI with modular and reusable components:

Todo

• [ ] Fix translations preact-i18nline
• [x] Fix settings https://github.com/workhorsy/comic_book_reader/issues/110
• [x] Handle Errors
• [ ] History https://github.com/workhorsy/comic_book_reader/issues/104
• [x] Improve UI / UX
• [x] Fix fontawesome bug / icons
• [ ] Test / lighthouse test
• [x] Responsive / mobile support
• [x] Remove duplicated css / modules
• [ ] Fix empty library
• [ ] Port / Fix Reader

[btzr-io]

https://github.com/workhorsy/comic_book_reader/tree/polymer is this branch still active?

[workhorsy]

This is a good idea. I have been looking into different libraries to do this: angular, react, vue, polymer, et cetera. Unfortunately right now I don't know enough about either to properly use them.

[workhorsy]

@btzr-io That polymer branch was accidentally pushed to github. I don't think there is anything even in it. It was just for a test. I'm not even sure if polymer is the right component library to use.

[btzr-io]

Ok, here's a basic implementation of react (not ready yet): https://github.com/btzr-io/comic_book_reader/tree/react

Run for development

http://localhost:3000/

npm start

[btzr-io]

Now we just need to split UI into react-components:

• Menu
• Settings
• Welcome screen
• ...

[workhorsy]

Since you started porting to React, I've been looking into it more. Surprisingly it has a problem with its license. From what I understand, it uses the 3 clause BSD license with a patent rider clause added:

https://en.wikipedia.org/wiki/React_(JavaScript_library)#Licensing

This would make it so Facebook could terminate someones right to use React, if Facebook thinks they violated one of Facebook's patents. Or if they made a patent claim against Facebook.

It looks like there is a recent effort to fix this: https://github.com/facebook/react/issues/10191

Until this is resolved, there is no way I can support using React. You can continue changing it to use React if you want. But there is no way I can merge this into master with the license problem.

[btzr-io]

Well, we could use: preact

Preact

Fast 3kB alternative to React, with the same ES2015 API.

And if facebook ever fix that issue we could migrate to react:

Preact-compat

This module is a compatibility layer that makes React-based modules work with Preact, without any code changes.

[btzr-io]

Preact License: MIT License

[workhorsy]

I'll look into preact. Thanks

[workhorsy]

Right now I'm looking at a bunch of different component libraries. Here are a few requirements that will need to be met for us to select one:

• Must work with Internet Explorer 11, Chrome, Firefox, and Safari
• Must have a standard open source license such as MIT, GPL, AGPL, Apache, or 3 clause BSD
• Must be easy to setup on Linux, Mac, and Windows
• Size of the library does not matter, since we will need 3MB of code to uncompress Rar, Zip, Tar, and view PDF files.

[btzr-io]

I think preact it's a really good option (lightweight, fast, react-compatible, works with redux) but I only can think about: react, riot, vue.js, polymer

License

Preact License: MIT License

Setup

https://github.com/developit/preact#getting-started

Preact-cli

Start building a Preact Progressive Web App in seconds

https://github.com/developit/preact-cli

Benchmark

http://developit.github.io/preact-perf

Browser support

[btzr-io]

Riot.js

Framework size comparison

Riot | 3.6.1 | 10.43kb

Browser support

Riot is supported by all modern browsers and it does not require any additional polyfill

License MIT

[codyhatch]

This would make it so Facebook could terminate someones right to use React, if Facebook thinks they violated one of Facebook's patents. Or if they made a patent claim against Facebook.

That's incorrect. Facebook cannot terminate your right to use React, they can only terminate your right to use any patents which they may or may not have on the concepts underlying React. And that termination does not happen if Facebook thinks you've violated their patents, only if you make a patent claim against Facebook. That's clarified explicitly here.

Q: Does termination of the additional patent grant in the Facebook BSD+Patents license cause the copyright license to also terminate?

A: No.

[j127]

they can only terminate your right to use any patents which they may or may not have on the concepts underlying React

I think that it isn't wise to have any of that hanging over software projects, especially as those PATENTS files get scattered throughout dependencies (Immutable, etc.). It creates a power imbalance, since Facebook could violate your patents, and then you would have to figure out what that untested file really means in practice.

Until those PATENTS files are removed, many companies won't be able to use open-source software that depends on Facebook libraries.

[workhorsy]

@btzr-io What do you think of polymer 2? It seems to be closest to what vanilla Web Components will be. The only down side I can see is that it still uses Bower, which is basically dead.

[btzr-io]

http://riotjs.com/compare/#polymer

• It still uses Bower, which is basically dead.

• Some features used by Polymer are not yet supported natively in all browsers.

• The Web Components syntax is experimental and complex.

I never used polymer before, I'm looking at the docs...

[workhorsy]

It looks like they are comparing polymer 1.8. Polymer 2.0 is a rewrite that is relatively new and allegedly solves performance problems.

[btzr-io]

Polymer(v1.8.0) + WebComponents(v0.7.24) is 6x bigger than Riot

[workhorsy]

I'm not really concerned about size, since we will be shipping around 3MB of code just to uncompress Rar, Zip, Tar, and view PDF files.

[btzr-io]

Ok, I'm not sure how to implement it yet... I rather prefer to use other framework (react / preact as I suggested) but if you think this is the best option, I'll be glad to help you with the components

[workhorsy]

@codyhatch I'm not sure what you mean. I am not a lawyer btw. In my reading of the PATENTS file there are several ways in which the license would terminate unfairly:

1. They define "Patent Assertion" as "including a cross-claim or counterclaim". Section (i) "against Facebook or any of its subsidiaries or corporate affiliates". Therefore any counter claim against Facebook would terminate the license.

2. Section (ii) would terminate the license if the user ever sued Facebook for infringing their own patent. This includes any "corporate affiliates". This could be any company Facebook has any relationship with.

3. Section (iii) says that the license would only NOT expire if the counter claim was "against that party that is unrelated to the Software". I read that as: Counter claims terminate the license if they are against the people that wrote/own the code (Facebook).

I'm sure there are more holes. I seems like this entire PATENTS file is designed to look like it is protecting Facebook from being attacked by patents claims. While in reality it is filled with double negatives, that stop people from defending themselves from attack by Facebook.

The license granted hereunder will terminate, automatically and without notice,
if you (or any of your subsidiaries, corporate affiliates or agents) initiate
directly or indirectly, or take a direct financial interest in, any Patent
Assertion: (i) against Facebook or any of its subsidiaries or corporate
affiliates, (ii) against any party if such Patent Assertion arises in whole or
in part from any software, technology, product or service of Facebook or any of
its subsidiaries or corporate affiliates, or (iii) against any party relating
to the Software. Notwithstanding the foregoing, if Facebook or any of its
subsidiaries or corporate affiliates files a lawsuit alleging patent
infringement against you in the first instance, and you respond by filing a
patent infringement counterclaim in that lawsuit against that party that is
unrelated to the Software, the license granted hereunder will not terminate
under section (i) of this paragraph due to such counterclaim.

A "Necessary Claim" is a claim of a patent owned by Facebook that is
necessarily infringed by the Software standing alone.

A "Patent Assertion" is any lawsuit or other action alleging direct, indirect,
or contributory infringement or inducement to infringe any patent, including a
cross-claim or counterclaim.

https://github.com/facebook/react/blob/master/PATENTS

It is also possible that my understanding may be wrong. I do not have the time or resources to deal with any patent shenanigans. I do not support software patents. Until the React the PATENTS file is removed, and React is placed under a standard open source license, I won't be using it.

That is just my opinion, feel free to disagree.

[workhorsy]

@btzr-io I'll have to look at preact and polymer more later tonight.

[workhorsy]

I spent a little bit of time making a simple polymer 2.0 and preact website. I had huge problems with polymer:

• Bower is deprecated and gives all kinds of warnings
• Styling child elements is hard because shadow DOM is like an extra phantom element wrapping everything
• Polymer does not have its own libraries for state, routing, et cetera. So people just end up using react libraries like redux anyway
• The way Google segments polymer elements into Iron, Paper, Neon, Gold is very strange and confusing to me.
• Very few people are using polymer. Even fewer are using polymer 2.0
• Most of the ecosystem in Polymer seems to come from Google (or people with a vested interest in Google), while react/preact ecosystem seems to be more organic.

I don't want to crap all over polymer too much. I think it does have a lot of great ideas, and it is more like what I want out of standard WebComponents.

Anyway. Preact looks like it will be good enough for now. We can always move to something else, or go back to pure JavaScript if this fails. No big deal.

I started on a basic Preact port here: https://github.com/workhorsy/comic_book_reader/tree/preact

[btzr-io]

Nice, I tried to implement translations with preact: https://github.com/Download/preact-i18nline

But there is an issue with preact-i18nline: https://github.com/Download/preact-i18nline/issues/6 https://github.com/Download/i18nline/issues/10

[workhorsy]

Cool. I should probably use preact-i18nline rather than rolling my own translation code.

[Download]

Hi guys. I just noticed this issue because I have picked up work on preact-i18nline again. If you do decide to use it, the coming weeks will be a good time to experiment with it and give some feedback about what is not working right for you, what you think should change or works well etc. So I can incorporate this feedback in my work I'm doing now.

[workhorsy]

Thanks. I haven't had any time to work on the comic book reader. Hopefully someone can continue porting to Preact.

[btzr-io]

@Download awesome, I'm currently working on some components and they have a tooltip assigned with the title attribute, does this work with preact-i18nline or just the text inside the button:

	<button class={style.button} title={label} onClick={action}>
        {...}
       </button>

[Download]

title works I think. There is a whitelist of HTML attributes that get translated as well as the contents of the element.

[Download]

Setting up the project is tricky still at the moment. So let me know if you need help. The docs are a bit out-of-date as well atm.

I'm working on making it simpler to drop into a project and as part of that work will also update the README. Until then I would advice you to keep an eye on https://github.com/backstopmedia/preact-book-example. This is an example project using Preact, created with Preact CLI. I will be pushing a branch there soon with the customizations needed to get it to work with preact-i18nline.