Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend Framework Rewrite #1821

Open
datitisev opened this issue Jul 12, 2019 · 7 comments

Comments

@datitisev
Copy link
Member

commented Jul 12, 2019

  • Update to Mithril v2
    • See #872 for ideas with Component layer rewrite for v1
  • Integrate TypeScript
    • Requires some kind of typings package, @flarum/types
    • Easily catch errors on compile time
  • Replace moment with alternative such as dayjs
  • Replace jQuery with alternative such as zepto
  • Drop bootstrap, replace with component alternatives where necessary
    • Replace modal plugin with micromodal
    • Replace tooltip plugin with tooltip.js
      • feel free to suggest lighter alternatives for tooltip.js
    • Fix some weird incompatibilities with dropdown plugin or replace
    • Upgrading to bootstrap v4 (#1589) changed a bunch of stuff, would require changes anyway
    • Bootstrap requires jQuery, increasing bundle size
  • [Tags] Replace html5sortable with dragula
    • Includes mobile support and has a smaller minified size

Important thing to note is to not change too much, we already had a big change with webpack.

@datitisev datitisev self-assigned this Jul 12, 2019

@datitisev

This comment has been minimized.

Copy link
Member Author

commented Jul 16, 2019

Some work has been done on the ds/frontend-framework-rewrite branch.

Bootstrap's affix plugin, moment, jquery, jquery.hotkeys have all been replaced with alternatives.

  • moment has been replaced with dayjs, but kept globally so language packs require minimal to no changes to continue working
  • jquery replaced with zepto, some issues with compatibility and missing features (specially animations, hopefully tackling that right now)
  • jquery.hotkeys replaced with mousetrap, popular + easy to use

Finding alternatives for the rest of the bootstrap plugins has been a bit hard, so no progress has been made on any others yet. Mainly testing + failing. However, we might be able to use some of them with Zepto (some patches needed, but not hard).

Haven't touched Mithril v2 or TypeScript yet (excluding some testing done with both previously).

The built dist files have gone down to 268K (forum) and 188K (admin) from 356K and 276K respectively.

@yulei745

This comment has been minimized.

Copy link

commented Jul 18, 2019

Why use some outdated libraries such as: zepto, jump.js, so the library has not been updated for a long time.

@matteocontrini

This comment has been minimized.

Copy link

commented Jul 18, 2019

I'm not convinced about Zepto either. What's the reason behind that choice? Is it only for the reduced size of the library? I'm not seeing any other advantage, as it seems it hasn't been updated for 3 years, and others have dropped it for performance reasons. Plus I think it could create issues with extensions that rely on jQuery being available.

@datitisev

This comment has been minimized.

Copy link
Member Author

commented Jul 18, 2019

@yulei745 @matteocontrini

In a best case scenario, we wouldn't need jQuery at all to do what we want. However, as we probably don't want to reinvent the wheel, we use plugins that chose jQuery for easier coding instead of native implementations. By switching to Zepto, we can minimize the impact jQuery has on the bundle size and maintain compatibility with some jQuery plugins with some patches to Zepto (see js/src/common/utils/patchZepto.js).

I don't think performance is much of a concern here as jQuery is only used when necessary (and could probably be removed completely with some work). And we don't really take advantage of many of the features jQuery has to offer, most of which can be done better natively (http://youmightnotneedjquery.com/), apart from IE 11 support.

Extensions that rely on jQuery being available will still probably work, unless they use complex selectors not supported by Zepto. Besides, this is a rewrite, and while I am trying to make everything as backwards-compatible as possible, there will be breaking changes. We are on beta versions after all 🤷‍♂.

And a library doesn't necessarily have to be recent to work well. The issues that jump.js has in its repository really don't concern our use case, and mostly seem to be feature requests anyhow. I tested a few smooth scrolling methods before finding one that worked well for Flarum's use case.

Hopefully that answered some of your questions 🙂.

@yulei745

This comment has been minimized.

Copy link

commented Jul 19, 2019

I am looking forward to updating to mithril.js v2, but I don't know what I can do.

@datitisev

This comment has been minimized.

Copy link
Member Author

commented Jul 19, 2019

@yulei745

I don't know what I can do.

Do you mean to help out with the development, or in terms of extensions ? This isn't a priority, so if you do want to help with Flarum development, please do look at issues in the beta 10 milestone 🙂.

@datitisev

This comment has been minimized.

Copy link
Member Author

commented Aug 5, 2019

Some more work has been done.

  • Bootstrap modal plugin replaced with micromodal
  • Bootstrap tooltip plugin replaced with tooltip.js
    • wasn't working for some reason
    • don't love using tooltip.js as it relies on popper.js, which is a very advanced library compared to our needs, meaning bigger bundle size (+20kb)
  • Fixed issues with Boostrap dropdown plugin
    • works just fine now + is small

Build dist files have gone up by 20K each, now 288K (forum) and 208K (admin).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.