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.
- Does it function?
- 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?
$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.
Submitting to this hackathon could earn you:
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.
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
- 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
- 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.
- 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.
- 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
- 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!!!)
- Multiple sizes/device types
- Allow for multiple views? (tab interface)
- Provide theme-related UI
Component Editor Goals
- Provide a way to select a component and edit its properties
- 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
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 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
- 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.
Director of Engineering
Does it function?
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?