Webmaker/Concept-Nimble: Difference between revisions

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.

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].

[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).

Because Brackets is built around a [https://github.com/adobe/brackets/wiki/Brackets-Extensions modular 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-CSS-Lint.png|800px]]

Brackets isn't fully supported yet in browsers.  At the time of writing there is an [https://groups.google.com/forum/#!topic/brackets-dev/HR4lwxEKt6M experimental in-browser branch] that uses a node.js-websocket based backend to simulate the file system and other services.  The resulting editor can be hosted in a web page, but is far from universally usable across various HTML5 browsers.  Here is a screenshot of it running in WebKit (top) and Gecko (botom):

Making Brackets work cross-browser would be necessary, which would mean writing/adding shims for various WebKit-only dependent APIs (e.g., File System API), and dealing with <code>-webkit</code> prefixed CSS.  The backend node server would also likely need work, and getting all this landed in master vs. as an experimental branch would be ideal.

In providing a platform for learning open web technology and development, Webmaker has to balance the need for simplicity at the beginning stage, and a gradual expansion of capability as learning progresses.  The web is easy to start learning, but becomes more complex quickly.  Expert developers know that one only manages such complexity with tools and augmented environments that make navigation, discovery, and validation possible.  A successful learning strategy will not only include an ever increasing difficulty in lessons and examples, but also more powerful and advanced features in the learning environment.  Providing these too early will mean learners are overwhelmed and distracted.  Not providing them will mean that learning beyond the basics becomes more difficult.  The progression from Thimble to Nimble could help ease the transition for learners and teachers without requiring a false dichotomy between simple vs. powerful.