Hola, mi nombre es Dmitry Karlovsky y yo ... ese pimiento aún tóxico. Recientemente vertí mis vibraciones alfa en Alfa Bank . En respuesta, los chicos actuaron con dignidad y no me atacaron en forma personal con explicaciones de lo mucho que estaba equivocado, sino que comenzaron un problema en el github . E incluso arreglaron algo, haciendo insostenibles algunas de mis afirmaciones. Pero no la parte donde SSR se estropea.

Ha pasado el tiempo, el polvo se ha asentado y luego la historia continúa: recientemente, el productor del estudio de contenido Habr se me acercó con una propuesta para lijar su Cake . ¡Bien, destapemos el ventilador!

Caso complejo

Tomemos, por ejemplo, esta página con 2500 comentarios. Esta es una página tan grande que si la abre en Chrome, la truncará en 1400 comentarios. Para leer el resto tendrás que abrirlo, por ejemplo, en Ognelis. Dejemos la razón de esto en la conciencia de los desarrolladores. Mejor pensemos en cómo prevenir esto. Pero primero, tomemos medidas:

• — HTML JSON . , " ". , .
• — , .
• — (, — ), F5 ( " ") . .
• — , , , , .
• DOM — document.getElementsByTagName('*').length , .
• — . .
• — . .
• — , (shift+esc) .

. - — .

: . HTML. : HTML, "" JSON VueJS . , HTML. HTML , , .

, JSON 4 HTML. Tree , , JSON . , , , — 30%.

HTML , :

1. , 8 , . loading="lazy", .
2. HTML , , . DOM, HTML . — HTML.

, DOM . , . VueJS , .

100K DOM . 40 . .

DOM . , , , 700. , . — 2 . DOM . DevTools , .

— DOM . , . :

:

1. .
2. , .

— $mol, , , $mol .

JSON. , , , . $mol_data:

const Person = Rec({
    alias: Str,
    id: Str,
    login: Str,
    fullname: Maybe( Str ),
    avatarUrl: Maybe( Str ),
    speciality: Maybe( Str ),
})

const Comment =  Rec({
    id: Int,
    author: Maybe( Person ),
    children: List( Int ),
    isAuthor: Maybe( Bool ),
    isPostAuthor: Maybe( Bool ),
    message: Str,
    parentId: Int,
    score: Maybe( Int ),
    timeChanged: Maybe( Moment ),
    timePublished: Maybe( Moment ),
})

const Comments_response = Rec({
    comments: Dict( Comment ),
    threads: List( Int ),
})

— null , .

, . , :

@ $mol_mem
comments_data() {
    const uri = `https://m.habr.com/kek/v2/articles/${ this.article_id() }/comments/`
    const data = Comments_response( this.$.$mol_fetch.json( uri ) )
    return data
}

, , . , HTML. $mol_html_view:

<= Article $mol_html_view
    html <= article_content \
    highlight <= search
    image_uri!node <= image_uri!node \

( view.tree, , .)

HTML, $mol_view , . , $mol_html_view , .

image_uri, IMG , . , src , data-src. :

image_uri( node : HTMLImageElement ) {
    return node.dataset.src || node.src || 'about:blank'
}

. / .

@ $mol_mem_key
comments_visible( id : number ) : readonly number[] {

    if( this.comment_expanded( id ) ) {
        return this.comments_all( id )
    } else {
        return this.comments_filtered( id )
    }

}

, . , $mol . , , - — .

, , , , . . — . :

Ctrl+F , $mol_hotkey :

plugins /
    <= Search_key $mol_hotkey
        mod_ctrl true
        key * F?event <=> search_focus?event null
    <= Theme $mol_theme_auto

:

search_focus( event : Event ) {
    this.Search().Suggest().Filter().focused( true )
    event.preventDefault()
}

, $mol_theme_auto, .

, , $mol_lights_toggle:

tools /
    <= Lights $mol_lights_toggle
    <= Sources $mol_link_source
        uri \https://github.com/nin-jin/habrcomment
    <= Search $mol_search
        query?val <=> search?val \

, .

, , $mol_style, , :

$mol_style_define( $my_habrcomment , {

    Orig: {
        flex: {
            grow: 1,
            shrink: 0,
            basis: per(50),
        },
    },

    Article: {
        maxWidth: rem(60),
    },

    Comments: {
        flex: {
            shrink: 0,
            grow: 1,
        },
    },

    Comments_empty: {
        padding: rem(1.5),
    },

} )

:

include \/mol/offline/install

Service Worker, .

, , , .

, : https://nin-jin.github.io/habrcomment/#article=423889

, :

javascript: document.location = document.location.href.replace( /\D+/ , 'https://nin-jin.github.io/habrcomment/#article=' )

400 , . :

• /
• /
• /

5 . 6 ( 2 , ). , . .

. , HTML . , - , :

<= Message $mol_html_view
    minimal_height 60
    highlight <= search \
    html <= message \
    image_uri!node <= image_uri!node \

HTML . , , , .

5 . 10 .

API, — , , . . , — . :

@ $mol_mem
comments_data() {
    const search = encodeURIComponent( this.search() )
    const uri = `https://m.habr.com/kek/v2/articles/${ this.article_id() }/comments/?search=${search}`
    const data = Comments_response( this.$.$mol_fetch.json( uri ) )
    return data
}

, , . . , . - — . API. — .

, — , HTML, , - : , , , BR, . , - , - .

$mol_html_view HTML- — , . , , .

, :

1. — - $mol_list. , . - .
2. , overflow-anchor, , . , , , 100K , .

— , . , , . , , .

1. SSR PWA.
2. , , .
3. , — .
4. VueJS — , $mol — .
5. , .
6. Vale la pena preferir aquellas soluciones que no conduzcan a un aumento descontrolado de la cantidad de elementales en la casa.

Enlaces

1. Fuentes del lector : puede notar que no hay nada en el código.
2. Página del marco $ mol : horrorícese de lo mucho que tenemos allí.
3. Canal con noticias sobre $ mol y MAM - suscríbete para estar al tanto de todo lo importante que les sucede.
4. Canal de videos $ Mol : algún día aparecerán aquí tutoriales en video.