Bringing the Future of JS Visual Editing to Life!

Mission: Open Architect

Hackathon & Open Source Project


We are releasing an Open Source version of Sencha Architect, and we need your help bringing it to life!

Your mission, if you choose to accept it, is to help Sencha fuel open source and enterprise innovation across various industry verticals by designing an open source WYSIWYG editor that allows you to edit your application views.

Your JavaScript skills will be put to the test as you balance the following criteria in your submission:

  • WYSIWYG Functionality
    • Does it function?
  • Component Editing
    • Does it function?
  • Ext JS Usage
    • Have you used Ext JS, and have the editing properties of the Ext JS grid been incorporated?
  • Code & Aesthetic Design
    • Does it look great? How did you functionally design your code?


This Open Source version of Sencha Architect will ultimately allow web application developers to resize components, change styles, theme, and more—become a catalyst for innovation in the open source community, as you pioneer the design for our upcoming open source JavaScript WYSIWYG editor.

Mission: Open Architect begins on June 15th and ends on July 15th, giving developers exactly one month to finalize their submissions. Don't miss out on this chance to leave your mark on the world of JavaScript, and bring home the $5,000 grand prize!

View full rules

Prizes

$14,975 in prizes

Grand Prize: $5,000 & Ext JS Enterprise 5-Pack

The grand prize for this hackathon includes a $5,000 reward with a bonus 5-pack of our Ext JS Enterprise license ($9,475 value!)

Second Place: $350

Second place will receive $350.

Third Place: $150

Third place will receive $150.

Devpost Achievements

Submitting to this hackathon could earn you:

Eligibility

Only those that fall within the eligibility guidelines laid out in our Legal Terms & Conditions for Mission: Open Architect are permitted to take part in this hackathon.

Requirements

Hackathon Goals

Use Ext JS to the best of your ability to produce a JavaScript WYSIWYG Editor

Why

The goal is to inspire the community to design an open source WYSIWYG editor that allows you to edit your application views. 

Solve for X:

As a web application developer, I want to build a view for my X framework. I want to be able to drag components and drop them in my WYSIWYG editor, which is a view of my application. I would really like to resize the components, change the styles, theming, and change other component properties. 

Application Goals
  • Aim to build a component palette where you can drag components to your WYSIWYG editor.
  • Aim to build a WYSIWYG editor.
  • Build a component property editor
Technical Goals
  • Application code is written with JavaScript
  • Produce a single page web application that runs in one of the latest browsers
  • Architecture uses node & npm
  • Provide good coding practices, like modular design
  • Use Ext JS 7.2 components in the application
    • React with ExtReact
    • Angular with ExtAngular
    • VueJS with ExtWebComponents
    • Or any other framework with ExtWebComponents
Functional Goals Component Pallet Goals

Overall

  • Use the doxi JSON, Ext JS components list provided in our blog for building a component pallet.
  • Aim to provide a preview of the component.

Options

  • Provide a window/panel with a list of draggable components from the Ext JS component library
    • Categorize by component type
    • Provide the ability to add libraries to component pallet
    • Provide a component search query filter
  • Provide for a library of components list and list of all properties and configs for a given component. 
WYSIWYG Editor Goals

Overall

  • Provide a WYSIWYG editor in which you can drag in components
  • Provide a way to resize and change layouts
  • Provide a way to select a component, and edit that component's properties in a component property editor
  • Ensure that your editor works well with framework X views

Options

  • Allow for the selection of a starter view package based on a template
  • Allow for the selection of an existing view or view package (no metadata!!!)
  • Provide a center window/panel with a visual representation of the view being designed, along with an additional tab to show the underlying JavaScript code for the view
    • Multiple sizes/device types
    • Allow for multiple views? (tab interface)
  • Provide theme-related UI

 

Component Editor Goals

Overall

  • Provide a way to select a component and edit its properties

Options

  • Provide a WYSIWYG inspector (the hierarchy of the objects in the application)
  • Optionally, the data type of each property should be displayed and/or honored. 
  • Provide for contextual documentation for a component, property, event or method
  • Provide for a list of available events for each added component.  For a given event, if needed, provide for the name of the function that will be called.  This function would be added to the ViewController and wired up to the component in the View
  • Provide for the ability to ‘data bind’ a given property
Code Functionality

The goal is to provide good application design practices for the framework of choice. For example, Ext JS developers will receive bonus points for using Ext JS MVVC (although not a requirement).

The goal is to provide good architecture to implement the functionality that works well with the application. 

More information on what we will look for with each framework can be found below:

  • For Ext JS javascript consider using MVVC
  • For React consider using Redux
  • For Web Component frameworks, using custom elements and X framework libraries to help with code architecture. 
  • Is the code readable like a story, does the context make sense?
  • Can you easily debug the project with Visual Studio Code
VCS Requirements
  • Present your application through a GitHub repo. 


For a complete list of submission requirements, please refer to the Submission Requirements section found in our Legal Terms & Conditions for Mission: Open Architect.

Judges

Kegan Blumenthal

Kegan Blumenthal
General Manager

Adam Mischon

Adam Mischon
Co-Founder

Andy Wilson

Andy Wilson
Director of Engineering

Judging Criteria

  • WYSIWYG Functionality
    Does it function?
  • Component Editing
    Does it function?
  • Ext JS Usage
    Have you used Ext JS? Are editing properties of the Ext JS grid incorporated?
  • Code and Aesthetic Design
    Does it Look great? How did you functionally design your code?

theme

  • Productivity