Heads up that Shahyar from the Flow team met up with Juliusz and I to
discuss better code sharing and thus easier integration betwen Flow
and MobileFrontend. It seems we are doing various things in a similar
fashion and there is an opportunity to share code.
You can see Shahyar's notes below but the main areas that could do
with immediate consolidation are as follows:
* Both use client side templates but with different template
libraries. MobileFrontend has a method of serving these via
ResourceLoader. We recommended that we consolidate this code asap and
aim to push it into core, rather than have the situation where we are
both using our own code. We should make this template agnostic to fit
in with the ongoing RFC around client side templates. I cut a story
card to try and get this on MobileFrontend's radar -
https://wikimedia.mingle.thoughtworks.com/projects/mobile/cards/1800
* Flow uses jquery microsize to auto expand a textarea when typing,
mobile has its own lightweight library to do this.
* Both Flow and MobileFrontend use a lightweight library to generate
user friendly last modified timestamps ( e.g. 3 days ago etc) - this
is much smaller than moment.js in core
* Both extensions use Class inheritance JavaScript model.
---------- Forwarded message ----------
From: Shahyar Ghobadpour <sghobadpour(a)wikimedia.org>
Date: Tue, Mar 25, 2014 at 2:34 PM
Subject: Mobile & Core Features front-end meetup technical notes
To: "Editor engagement list for the core E2 development team."
<e2(a)lists.wikimedia.org>
Cc: Juliusz Gonera <jgonera(a)wikimedia.org>rg>, Jon Robson
<jrobson(a)wikimedia.org>rg>, Tomasz Finc <tfinc(a)wikimedia.org>
Core Features met up with the front-end guys from Mobile, and we, in
Maryana's words, creeped on each others' code. This gave us a lot of
insight into how our teams have been doing things (spoiler alert: it's
very similar).
Here are my notes, from Flow's perspective on things:
Classes
Can extend objects
Call parents with .super
Notable classes:
EventEmitter
Binds events to objects, but is in fact just a wrapper for jQuery.Events
Overlay
M
Uses M.require to grab a constructor/class
Not big, just basically to make sure that the loading order is correct
and all requested modules actually exist
New ones added via M.define
Templates
Hogan
methods:
preRender
postRender
Most useful; adds logic to templates after the fact
Currently, they use this to find elements and bind (events) directly to them
mw.template implements template compiling, getting, adding
mw.template.add is called by resourceloader
Currently uses Hogan only, but could easily be changed to use
Handlebars (could even just overload mw.template.compile)
History State Management
Currently only implements hash change event
Android 2.3 and Android 4.0 do not correctly (how?) support history
API for adding more URLs to the history
Currently still in flux due to various issues
Would be worth combining efforts to make a better one
API
mw.api sucks, they wrote their own
Each API is subclassed
eg. editorApi implements its own special methods on top of Api
CSS
Has separate responsive styles for tablet and for phone
In individual files and loaded when needed, so as to not slow down the
base CSS with too many media queries
Might change; they may end up getting concatenated later on for simplicity
At 768px adjustment begins for media queries (to be standardized
between Mobile and Flow)
Misc
Custom micro.autosize.js
Automatically resizes textareas as you type
Only 600 bytes unminified
--Shahyar