जावास्क्रिप्ट फ्रेमवर्क कब गायब हो जाएगा?

सामग्री के लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, एक वेब डेवलपर, कहता है कि वह नियमित रूप से उन टूल के सेट की समीक्षा करने की कोशिश कर रहा है जो आपके उपयोग करता है। वह यह समझने के लिए ऐसा करता है कि क्या वह अपने सामान्य कार्यों को हल करके उनमें से कुछ के बिना कर सकता है। उन्होंने हाल ही में एक प्रयोग करने और जावास्क्रिप्ट फ्रेमवर्क का उपयोग किए बिना एक परिष्कृत फ्रंट-एंड एप्लिकेशन बनाने का निर्णय लिया।

एक ढांचा क्या है?

यदि आप विवरण में जाए बिना जावास्क्रिप्ट फ्रेमवर्क को परिभाषित करने का प्रयास करते हैं, तो यह पता चलता है कि यह एक उपकरण है जिसका उपयोग जटिल वेब अनुप्रयोगों को विकसित करने के लिए किया जा सकता है, विशेष रूप से एकल पृष्ठ अनुप्रयोगों (एसपीए) में।

पुराने दिनों में, ऐसे एप्लिकेशन शुद्ध जावास्क्रिप्ट और jQuery लाइब्रेरी की क्षमताओं के आधार पर बनाए गए थे। लेकिन, फ्रंट-एंड अनुप्रयोगों की बढ़ती जटिलता के साथ, संबंधित उपकरण दिखाई देने लगे जो प्रोग्रामर के लिए जीवन को आसान बनाते हैं। उदाहरण के लिए, ये रिएक्ट, एंगुलर और वी हैं।

इन दिनों प्रचलित रूपरेखाओं में कुछ समानताएँ समान हैं। इसलिए, अधिकांश फ्रंट-एंड चौखटे और लाइब्रेरी, वेउ से लेकर रिएक्ट तक, अपेक्षाकृत बोलने वाले, डेवलपर को निम्नलिखित विशेषताओं के एक निश्चित संयोजन के साथ प्रदान करते हैं:

• राज्य का सिंक्रनाइज़ेशन और आवेदन की दृश्य प्रस्तुति।
• रूटिंग।
• खाका प्रणाली।
• पुन: उपयोग के लिए उपयुक्त घटक।

क्या आधुनिक डेवलपर के लिए रूपरेखा आवश्यक है?

इस खंड के शीर्षक में पूछे गए प्रश्न का उत्तर इस बात पर निर्भर करता है कि आप फ्रेमवर्क की "आवश्यकता" के विचार से कैसे संबंधित हैं। मुझे यकीन है कि कई लोग कह सकते हैं कि वेब डेवलपर टूलकिट में फ्रंट-एंड फ्रेमवर्क आवश्यक नहीं हैं, और कभी भी आवश्यक नहीं हैं। यद्यपि यह निर्विवाद है कि ये बहुत उपयोगी उपकरण हैं।

वास्तव में, हमारे प्रश्न का सुधार इस प्रकार किया जा सकता है: "क्या फ्रेमवर्क" आधुनिक jQuery लाइब्रेरी "का एक सा है? उदाहरण के लिए, वे प्रोग्रामर जो ब्राउज़र एपीआई के विकास के दौरान प्रोग्रामर के निपटान में दिखाई दिए थे, क्या वे उन समस्याओं को हल करना संभव है, जो अन्य तरीकों से हैं? ”


jQuery

वास्तव में, इस सवाल का जवाब देना आसान नहीं है, लेकिन हम यह कह सकते हैं कि जावास्क्रिप्ट के विकास, निर्माण परियोजनाओं के लिए वेब घटकों और उपकरणों के साथ काम करने के लिए प्रौद्योगिकियों ने एसपीए के विकास को बिना फ्रेमवर्क का उपयोग किए पहले से कहीं अधिक आसान बना दिया है।

इस विचार का पता लगाने के लिए, मैंने केवल जावास्क्रिप्ट, मानक वेब घटकों और पार्सल बंडल का उपयोग करके एक-पृष्ठ का अनुप्रयोग विकसित किया। इस प्रक्रिया में, मुझे कुछ समस्याओं और कठिनाइयों का सामना करना पड़ा, जिसे देखते हुए आप विशेष रूप से स्पष्ट रूप से आधुनिक जेएस फ्रेमवर्क की ताकत देखना शुरू करते हैं।

उसी समय, जैसे ही मैंने शुरुआती बाधाओं से निपटा, मुझे आश्चर्य हुआ कि शुद्ध जावास्क्रिप्ट में एक-पेज का आवेदन बनाना कितना आसान है।

प्रायोगिक अनुप्रयोग अवलोकन

प्रश्न में आवेदन काफी सरल है। यह व्यंजनों का एक इलेक्ट्रॉनिक संग्रह है और उपयोगकर्ता को व्यंजनों को बनाने, देखने और संपादित करने की अनुमति देता है। उपयोगकर्ता, इसके अलावा, व्यंजनों को चिह्नित कर सकता है, यह दर्शाता है कि वह उन्हें पसंद करता है, और प्रविष्टियों को फ़िल्टर और हटा भी सकता है।


एप्लिकेशन होमपेज


पकाने की विधि रिकॉर्ड पृष्ठ

वेब घटक

- — . , , HTMLElement ( HTMLParagraphElement, ) .

, - , , connectedCallback, disconnectedCallback, attributeChangedCallback.

recipe-item, .

import template from './recipe.html'
import DATA_SERVICE from '../../utils/data'
export default class Recipe extends HTMLElement {
  constructor () {
    //   DOM,    recipe  DATA_SERVICE()
    super()
    this._shadowRoot = this.attachShadow({ mode: 'open' })
    this._recipe = null
    this.ds = new DATA_SERVICE()
  }
  connectedCallback () {
    //    html-  
    this._shadowRoot.innerHTML = template
    //   delete   
    this._shadowRoot
      .querySelector('.delete')
      .addEventListener('click', () => this._delete())
  }
  _render (title) {
    //      ,   
    this._shadowRoot.querySelector('.recipe-title').innerHTML = title
    this._shadowRoot.querySelector('.favorite').innerHTML = this._recipe
      .favorite
      ? 'Unfavorite'
      : 'Favorite'
  }
  _delete () {
    //       
    try {
      await this.ds.deleteRecipe(this._recipe.id)
    } catch (e) {
      console.error(e)
      alert(
        'Sorry, there was a problem deleting the recipe. Please, try again.'
      )
    }
  }
  get recipe () {
    //   
    return this._recipe
  }
  set recipe (recipe = {}) {
    //   ,   render
    this._recipe = recipe
    this._render(this._recipe.title)
  }
}

window.customElements.define('recipe-item', Recipe)

. , , .

, , npm- Vanilla JS Router. , API History, , - 100 . , - , (route guard).

import './components/error/error'
import content404 from './components/404/404.html'
import DATA_SERVICE from './utils/data'
const ds = new DATA_SERVICE()
//  ,  SPA
const $el = document.getElementById('app')

//  
const home = async () => {
  await import('./components/recipe/recipe')
  await import('./components/recipe-list/recipe-list')
  await import('./components/modal/modal.js')
  $el.innerHTML = `<recipe-list></recipe-list>`
}

const create = async () => {
  await import('./components/create-recipe/create-recipe')
  $el.innerHTML = `<create-recipe></create-recipe>`
}

const edit = async () => {
  await import('./components/edit-recipe/edit-recipe')
  $el.innerHTML = `<edit-recipe></edit-recipe>`
}

const error404 = async () => {
  $el.innerHTML = content404
}

//     
//    id     
const routes = {
  '/': home,
  '/create': create,
  '/error': error404,
  '/edit': async function (params) {
    const id = params.get('id')
    const recipe = await ds.getRecipe(id)
    await edit()
    $el.querySelector('edit-recipe').recipe = recipe
  }
}

//   onpopstate    URL    
//       -   /error
window.onpopstate = async () => {
  const url = new URL(
    window.location.pathname + window.location.search,
    window.location.origin
  )
  if (routes[window.location.pathname]) {
    await routes[window.location.pathname](url.searchParams)
  } else routes['/error']()
}
//     
let onNavItemClick = async pathName => {
  const url = new URL(pathName, window.location.origin)
  const params = url.searchParams
  if (routes[url.pathname]) {
    window.history.pushState({}, pathName, window.location.origin + pathName)
    await routes[url.pathname](params)
  } else {
    window.history.pushState({}, '404', window.location.origin + '/404')
    routes['/error']()
  }
}

//        
;(async () => {
  const url = new URL(
    window.location.pathname + window.location.search,
    window.location.origin
  )
  if (routes[window.location.pathname]) {
    await routes[window.location.pathname](url.searchParams)
  } else routes['/error']()
})()

//     onNavItemClick()
const router = {
  onNavItemClick,
  routes
}
export { router }

, . , , , — .

JS

, , . , JS-.

▍

-, , , , . , - Fronteers Conference 2011. . . , HTML- , .

▍

-. , — skatejs ssr web-component-tester. . , -, .

▍

querySelector()

- , , . Angular .

, — . , , , .

▍ Shadow DOM

Shadow DOM. . — , . , , , , , - . , . , , .

▍ DOM

Angular React , DOM. , . Angular University: «Angular DOM, , HTML- ».

Angular, , jQuery, DOM. , HTML-, , DOM, . , HTML-. Virtual DOM , , .

JS . .

▍

-, JS, ( «») , , . , , , Angular-.


Angular-


,

▍

- CLI, , , . , , -. , , , , , , .

▍

, , . . — . , , , , , . , , , , DOM. .

, React Angular, , . . , - React shouldUpdate() onPush Angular.

▍

— . , . . , , , . , .

Parcel. , , Webpack, , , , , Parcel , .

React, Vue Angular . «». , React «», Vue — « ».

Stencil Polymer? , , , , - , . , . , -.

, SPA - . , , , .

?

, - , , « ». , , , , , , . , , , , .

, — , , . « » . , , . , , , -.

, , , , , , , . — . , , , . — , -, , jQuery, .

, - . - , . , , - , .

- . , , , .

! -, ?