What js language is used in this code snippet?

I am looking at a really cool tool sketch.systems. They use a search bar example written entirely in js.

What js language is used in this code snippet?

function render(model){
  var active_state = model.active_states[0].name;
  return $('div', {style: {display: 'flex', justifyContent: 'center', height: '100%'}},
           render_search_bar(active_state, model))}

function render_search_bar(active_state, model){
  if (active_state == 'Inactive') {
    return $('div',
             $('input', {type: 'text',
                         placeholder: 'Enter a search term...',
                         style: {border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'},
                         onFocus: function(){ model.emit("focused") }}),
             $('button', {disabled: true, style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: 'lightgrey'}}, 'Search'))
  }
  if (active_state == 'Empty') {
    return $('div',
             $('input', {value: '',
                         style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'},
                         onChange: function(){ model.emit("typed") }}),
             $('button', {disabled: true, style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: 'lightgrey'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'},
                         onClick: function(){ model.emit("canceled") }}, 'Cancel'))
  }
  if (active_state == 'Text Entry') {
    return $('div',
             $('input', {style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'},
                          onClick: function(){ model.emit("submitted") }}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}, 
                          onClick: function(){ model.emit("cleared") }}, 'Clear'))
  }
  if (active_state == 'Results') {
    return $('div',
             $('input', {style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'},
                         onChange: function(){ model.emit("typed") }}),
             $('button', {disabled: true, style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: 'lightgrey'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}, 
                          onClick: function(){ model.emit("cleared") }}, 'Clear'),
             $('ul',
               $('li', 'Search result 1'),
               $('li', 'Search result 2'),
               $('li', 'Search result 3')))
  }
}

Backbone.js? :thinking:
EDIT: It’s React :scream:

1 Like

I could be wrong as I’m not familiar with every framework ever

I think this is jquery, with a mixture of using the context argument (the nested jquery objects) and the attributes argument (the plain objects with things like style) of the normal jquery object

https://api.jquery.com/jQuery/#jQuery-html-attributes

E: The more I look at the docs the less certain I am, I hope Dan has the definitive answer

Yeah it’s jQuery + (I assume, unless someone has used exactly the same patterns) Backbone. Backbone is a small framework designed to fit very well alongside jQuery. Note that though Backbone works fine, it’s kinda obselete: in newer freworks, ideas it uses that haven’t aged well have been discarded and the good ones generally absorbed. Defo read the codebase of it though if you’re learning JS, it’s very well coded, structured and commented

2 Likes

Note: The $ is not jQuery, nor is it a secret call to document.createElement . Instead, it’s a wrapper around React.createElement . This wrapper is just a shorthand that saves typing and makes attributes optional. (If the second argument is an object, it will be interpreted as attributes; otherwise it will be interpreted as an element child.)

https://sketch.systems/tutorials/prototyping/

3 Likes

Huh, that’s a new one for me

Today I learned I guess

Hehe, so it is someone using the same patterns. Craziness

It’s “just” React without JSX (although you rarely see it in the wild, and their usage of $ completely throw me off).

@DanCouper do you agree with @jenovs that this is React?

Well, it’s specified in the tutorial, it tells you what it is

It’s just extremely confusing syntax at first glance

1 Like