Core: Frontend Framework Rewrite

[datitisev]

• [x] Part 1 of state changes in #2144, as per the discussion in the same issue. This will reduce the work needed in the later mithril 2.0 upgrade, and increase code quality. Rework:
  
  
  
  • [x] app.current, app.previous, cleanup Page classes #2156 @askvortsov1
  
  
  • [x] app.search: #2151 @askvortsov1
  
  
  • [x] app.cache.discussionList: #2150 @askvortsov1
  
  
  • [x] app.alerts #2163 @askvortsov1
  
  
  • [x] app.modal #2162 @askvortsov1
  
  
  • [x] app.composer #2161 @askvortsov1
  
  
  • [x] extract state from PostStream #2160 @askvortsov1
  
  
  • [x] Cleanup widget classes #2164 @askvortsov1
  
  
  • [x] NotificationGrid storing switches #2183 @askvortsov1
  
  
  • [x] CommentPost stores PostUser #2184 @askvortsov1
  
  
  • [x] NotificationPage/NotificationDropdown/NotificationList #2185 @askvortsov1
  
  
• [x] Upgrade / fix bundled extensions after state changes
• [x] Configure Typescript
• [x] Upgrade core to Mithril 2.0 (#2255, based off #2126)
• [x] Upgrade all bundled extensions to Mithril 2.0
  
  
  
  • [x] akismet - https://github.com/flarum/akismet/pull/15
  
  
  • [x] approval - https://github.com/flarum/approval/pull/21
  
  
  • [x] auth-facebook - obsolete with #2006
  
  
  • [x] auth-github - obsolete with #2006
  
  
  • [x] auth-twitter - obsolete with #2006
  
  
  • [x] bbcode - no JS, no PR necessary
  
  
  • [x] embed - https://github.com/flarum/embed/pull/10
  
  
  • [x] emoji - https://github.com/flarum/emoji/pull/29
  
  
  • [x] flags - https://github.com/flarum/flags/pull/29
  
  
  • [x] likes - https://github.com/flarum/likes/pull/22
  
  
  • [x] lock - https://github.com/flarum/lock/pull/23
  
  
  • [x] markdown - https://github.com/flarum/markdown/pull/19
  
  
  • [x] mentions - https://github.com/flarum/mentions/pull/52
  
  
  • [x] pusher - https://github.com/flarum/pusher/pull/23
  
  
  • [x] statistics - https://github.com/flarum/statistics/pull/12
  
  
  • [x] sticky - https://github.com/flarum/sticky/pull/19
  
  
  • [x] subscriptions - https://github.com/flarum/subscriptions/pull/32
  
  
  • [x] suspend - https://github.com/flarum/suspend/pull/27
  
  
  • [x] tags - https://github.com/flarum/tags/pull/93
  
  
• [x] Post-Mithril Bugfixes
  
  
  
  • [x] Reduce PostStream fadeIn time - https://github.com/flarum/core/pull/2312
  
  
  • [x] Remove route patch, update core and bundled to use a Link component - https://github.com/flarum/core/pull/2315
  
  
  • [x] Modal doesn't focus on first field when opened - https://github.com/flarum/core/pull/2314
  
  
  • [x] Stop m.stream from being global: use imports - https://github.com/flarum/core/pull/2316
  
  
  • [x] Add console.warn for BC layer - https://github.com/flarum/core/pull/2313
  
  
  • [x] Convert AlertManagerState to Typescript, use proper overloading for show() - https://github.com/flarum/core/pull/2309
  
  
  • [x] Add in BC layer for props/attrs, initProps/initAttrs, m.withAttr/withAttr, and m.prop/m.stream - https://github.com/flarum/core/pull/2310
  
  
  • [x] Discussions displayed twice - https://github.com/flarum/core/pull/2322
  
  
  • [x] Can't use goToNumber / goToIndex twice to same location - https://github.com/flarum/core/pull/2264
  
  
  • [x] Can't open modals from other modals - https://github.com/flarum/core/pull/2263
  
  
  • [x] Errors in PostStream caused by scrolling before content is rendered - https://github.com/flarum/core/pull/2299
  
  
  • [x] Fix double fadeIn effect for post we're scrolling to - https://github.com/flarum/core/pull/2300
  
  
• [ ] Documentation
  
  
  
  • [ ] Beta 14 upgrade guide - https://github.com/flarum/docs/pull/121
  
  
  • [ ] Update existing frontend docs - https://github.com/flarum/docs/pull/124
  
  
• [x] Library changes from #1950
  
  
  
  • [x] moment => dayjs
  
  
  • [x] html5sortable => draggable js
  
  

---

Obsolete Todos / Notes from original approach

See https://github.com/flarum/core/pull/1950.

• [ ] Update to Mithril v2
  
  
  
  • See https://github.com/flarum/core/issues/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
  
  
• [x] Replace moment with alternative such as dayjs
• [x] Replace jQuery with alternative such as zepto
  
  
  
  • [x] Replace jquery.hotkeys with alternative such as jwerty mousetrap
  
  
• [x] Drop bootstrap, replace with component alternatives where necessary
  
  
  
  • [x] Replace modal plugin with micromodal
  
  
  • [x] Replace tooltip plugin with tooltip.js
    
    
    
    
    
    • feel free to suggest lighter alternatives for tooltip.js
    
    
    
  
  
  • [x] Fix some weird incompatibilities with dropdown plugin or replace
  
  
  • Upgrading to bootstrap v4 (https://github.com/flarum/core/issues/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]

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]

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

[matteocontrini]

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]

@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]

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

[datitisev]

@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]

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

[datitisev]

I have started on Mithril v2 and Typescript. The best way to do this, after a few failures, is to start from scratch and bring in existing JS files one by one - i.e. convert files to typescript & mithril v2 as they are brought in. Thanks to @clarkwinkelmann for his help during this as well.

We'll probably want to make our Component class as close to Mithril's components, so those docs can be followed. However, we have introduced a few improvements such as:

• this.props continues to exist
  
  
  
  • this was done to allow for continued use of initProps and prevent needing to pass vnode/vnode.attrs to every single function
  
  
  • developers know how to use it
  
  
• Component.component remains
  
  
  
  • Mithril v2 changed, so now a component's constructor has to accept the vnode instead of simply the attributes/props
  
  
  • can use either JSX (<Component prop="value" />) or .component call (Component.component({ prop: 'value' }))
  
  
  • calls m under the hood, but its prettier :)
  
  
• m.prop stays, setting it to mithril/stream to keep old functionality
• m.withAttr manually added, as it was removed from mithril but is a useful helper

Some different things that we've decided not to make backwards compatible / keep the old structure for:

• init and config have now been replaced with mithril's new lifecycle hooks (oninit, oncreate, onbeforeupdate, onupdate, onbeforeremove, and onremove), see https://mithril.js.org/lifecycle-methods.html for more info on them
• m.route has changed
• and probably more

On the side of TypeScript, I've tried to make it so developers can prevent errors by making component props a type (optional). Sadly, it doesn't work with .component as that's a static method, but it works with this.props. It's not very pretty, but it is optional so 🤷‍♂. Feedback on this welcome.

The types & interfaces do not take up any compiled dist space (they appear as empty lines) so that's great 🙂.

export type ComponentProps = {
  children?: Mithril.Children,

  className?: string;
}

export default class Component<T extends ComponentProps = any> {
  protected props = <T> {};
}

export interface ButtonProps extends ComponentProps {
  title?: string,
  type?: string,
  icon?: string,

  loading?: boolean,
  disabled?: boolean,
  onclick?: Function
}

export default class Button<T extends ButtonProps = ButtonProps> extends Component<T> {}

[datitisev]

I have pushed the code I have so far to ds/frontend-framework-rewrite-mithril and flarum-webpack-config@ds/frontend-framework-rewrite.

There's an old folder in js that just contains the plain JS files from the frontend framework rewrite (w/o mithril v2 & typescript). I just use it when moving files to TypeScript.

I have added a markdown file to the root of the branch that contains some of the changes that have been made to the class structures & methods (exlcluding mithril v2 and typescript).

Haven't set up typings yet for flarum/core (and definitely not extensions 🙈), including thinking of how they will be generated, published, etc... and the global shims are a bit of a mess, at least with PhpStorm not liking them but recognizing them (???, I don't know TypeScript typings don't do this to me)

This is basically what I have right now.

I'll probably configure prettier at some point to fix the atrocious linting mistakes I'm committing when copy pasting coding.

Dist files are currently 196K (forum) and 132K (admin). Of course, it barely includes any of the classes necessary for Flarum to function like a forum. 😁

[datitisev]

Progress on the Mithril rewrite, excluding components / utils / helpers that still have to be copied over.

Outdated checklist removed. See OP for recent updates. /Franz

[askvortsov1]

As per today's kickoff meeting, here's the proposed roadmap for the remainder of this rewrite. The goal here is to have maximally modular PRs, so that history is as clean as possible. Plan is as follows:

Outdated checklist removed. See OP for recent updates. /Franz

[tankerkiller125]

A possible animation library replacement would be http://velocityjs.org/

[datitisev]

And instead of Zepto, cash (or cash-dom in NPM) seems like a better, more updated alternative.

[tankerkiller125]

See https://github.com/flarum/core/pull/2255 for Mithril 2 updates

[askvortsov1]

Consider replacing classList with https://www.npmjs.com/package/classnames?

[luceos]

Can someone distill every todo from this issue (and other issues) for the rewrite into the OP of this issue and include this checklist to signify rewriting bundled extension progress:

- [ ] akismet
- [ ] approval
- [ ] auth-facebook
- [ ] auth-github
- [ ] auth-twitter
- [ ] bbcode
- [ ] embed
- [ ] emoji
- [ ] flags
- [ ] likes
- [ ] lock
- [ ] markdown
- [ ] mentions
- [ ] pusher
- [ ] statistics
- [ ] sticky
- [ ] subscriptions
- [ ] suspend
- [ ] tags

[franzliedke]

What I did:

• Remove outdated checklists from other comments
• Combine the relevant checklists (and your list, thanks!) into a new one in the OP
• Try to link relevant PRs
• Tick boxes where appropriate to the extent of my knowledge
• Suggest deferring a few items that would further blow up the size of this release

[franzliedke]

I've started ticking the boxes for the extensions where the Mithril 2.0 upgrades are ready to be merged. Note that we will only merge these once the upgrade in core has been merged.