Confirmed users
656
edits
Webmaker/Concept-Nimble: Difference between revisions
→From Thimble to Nimble
| Line 60: | Line 60: | ||
Mentors and teachers using Nimble for their work can configure these features along with their Makes, examples, and curriculum. The coding environment is responsive and extensible, and dynamically loads whatever UI and internal services are needed. Exactly how this might be done is unclear, whether through <code><meta></code> directives in the learning HTML, or with some other metadata. The best implementation is unclear, but the concept is obvious: being able to not only author the content of what the learner will see, but also to selectively configure the environment in which they will encounter it, is very powerful and acknowledges that one size doesn't fit all, and no single use tool is appropriate to every learning situation. | Mentors and teachers using Nimble for their work can configure these features along with their Makes, examples, and curriculum. The coding environment is responsive and extensible, and dynamically loads whatever UI and internal services are needed. Exactly how this might be done is unclear, whether through <code><meta></code> directives in the learning HTML, or with some other metadata. The best implementation is unclear, but the concept is obvious: being able to not only author the content of what the learner will see, but also to selectively configure the environment in which they will encounter it, is very powerful and acknowledges that one size doesn't fit all, and no single use tool is appropriate to every learning situation. | ||
==Nimble's Foundation== | |||
Building the technical underpinnings of Nimble requires a number of problems to be solved. First, extensibility is critical: how are features, tools, and UI packaged and loaded? Second, how to build and add the large number of features that are required for more advanced features, for example integrated validators, navigation within larger projects, multi-file environments, etc. Webmaker's goal isn't to lead the web in creating cutting edge development tools, and getting sidetracked on building out a wealth of new features would become a distraction. What's needed is an existing solution that can be adapted to fit into Webmaker. One possible solution is [http://www.brackets.io/ Adobe Brackets]. | |||
===Adobe Brackets=== | |||
[http://www.brackets.io/ Adobe Brackets] is an open source web coding editor built using open web technologies. It's the editor that powers [http://html.adobe.com/edge/code/ Adobe Edge], among other things. In building their next generation web editing tools, Adobe chose to dog-food HTML5. Further, instead of building things in-house, they decided to work in the open and created an [https://github.com/adobe/brackets open source project] to help give the web a more powerful platform for building open development tools. | |||
Brackets isn't at 1.0 yet, but it's already highly usable, and [http://www.youtube.com/watch?v=rvo3Mv1Z4qU&feature=youtu.be very interesting]. The [http://www.adobe.com/devnet/html5/articles/bracket-code-architecture.html architecture] is modern and modular, with an early emphasis on extensibility and loadable extensions. Like Thimble's current code editor, Brackets is built on Code Mirror. However, it extends the idea of a single editor to include an environment with multiple files, and understands the connections between these files (e.g., where CSS or JS is declared). | |||
===Progressive Enhancement with Brackets=== | |||
Because Brackets is built around a module extension system, turning on new features is as easy as including new extensions. Consider some of the earlier issues with trying to teach a deeper understanding of web development in Thimble. Here's a current starter Make in Thimble with FriendlyCode replaced with Brackets: | |||
[[File:Brackets-Thimble.png|800px]] | |||
First, this screenshot doesn't represent an optimal or appropriate UI for hosting Brackets, but it helps serve as a starting point. Where we previously had | |||