jsxVsJs.md

JSX Pro & Cons:

Pro:

• looks like html template
• goes with react

Cons:

• new syntax & require preprocessor
• mix of xml & js syntax
• embeded expressions is unreadable (so we generate a lot of temporal variables)
• more characters (same punctuation)
• does not looks like code - does not drive refactoring & abstraction

So why JSX?

<div className='workflow'>                                                                         
   <Navigation workflow={wf} onNavigate={this.gotoStep.bind(this)} currentStepIndex={stepIndex} />  
   <Workspace step={currentStep} onNext={this.gotoNextStep.bind(this)} />                           
</div>   

characters: 311 syntax(<{/): 19

div({ className: 'workflow' },
  navigation({ workflow: wf, onNavigate=this.gotoStep.bind(this), currentStepIndex: stepIndex }),
  workspaec({ step: currentStep, onNext: this.gotoNextStep.bind(this) })
)

characters: 203 syntax (({,): 16

(<div className='workspace'>                                                                              
  <div className='ws-header'>                                                                            
    <h3>{step && step.title}</h3>                                                                        
    <div className='ws-btns'>                                                                            
      {buttons}                                                                                          
    </div>                                                                                               
  </div>                                                                                                 
  <div className='ws-body'>                                                                              
    { editorEl }                                                                                         
  </div>                                                                                                 
  <div className='ws-footer'>                                                                            
    <div className='ws-spacer'></div>                                                                    
    <div className='ws-btns'>                                                                            
      {buttons}                                                                                          
    </div>                                                                                               
  </div>                                                                                                 
</div>)           

punctuation: 50 characters: 1699

div({ className:'workspace'},                                                                            
    div({ className:'ws-header'},                                                                        
        h3({}, step && step.title),                                                                      
        div({ className:'ws-btns'},                                                                      
            {buttons})),                                                                                 
    div({ className:'ws-body'},                                                                          
        { editorEl }),                                                                                   
    div( { className:'ws-footer'},                                                                       
         div( { className:'ws-spacer'}),                                                                 
         div( { className:'ws-btns'}, {buttons})))  

punctuation: 48 characters: 997