yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Missing client files, excluding node_modules

Browse Source
This commit is contained in:
Per Ploug Krogslund
2013-06-10 10:44:40 -02:00
parent 6b6ece01f6
commit 47f1dcf4e5
1121 changed files with 190073 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/Umbraco.Web.UI.Client/docs/html/belleLabTasks.html Normal file
View File

@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html>
<head>
<title>doc</title>
<style>
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
pre code {
display: block; padding: 0.5em;
color: #333;
background: #f8f8ff
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
color: #998;
font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
color: #333;
font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
color: #d14
}
pre .title,
pre .id {
color: #900;
font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
font-weight: normal
}
pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
color: #458;
font-weight: bold
}
pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
color: #000080;
font-weight: normal
}
pre .attribute,
pre .variable,
pre .lisp .body {
color: #008080
}
pre .regexp {
color: #009926
}
pre .class {
color: #458;
font-weight: bold
}
pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
color: #990073
}
pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
color: #999;
font-weight: bold
}
pre .deletion {
background: #fdd
}
pre .addition {
background: #dfd
}
pre .diff .change {
background: #0086b3
}
pre .chunk {
color: #aaa
}
</style>
</head>
<body>
<h1>Belle Lab Tasks</h1>
<h2>Applcation Structure</h2>
<ul>
<li>Work on dialogs, plenty to choose from</li>
<li>A reuseable tree component for pickers</li>
<li>migrate all the navigation stuff into a navigation service</li>
<li>a scriptloading service to replace requireJs, with labJs, $script or similiar</li>
<li>reusable modal component (show in left side, right side, generic closing events etc)</li>
</ul>
<h2>Components</h2>
<ul>
<li>tabs directive</li>
<li>date picker</li>
<li>tabs property editor</li>
<li>localization strategy?<ul>
<li>localize filter: {{This is my default english value,content.area.key | localize}}</li>
<li>So, it will use the default value if there is none found for the key, and register this
value in the localize service, keys should not contain commas</li>
</ul>
</li>
</ul>
<h2>Chores</h2>
<ul>
<li>Write a test</li>
<li>Write docs</li>
<li>Automate something<ul>
<li>OSX:<ul>
<li>start webserver</li>
<li>start grunt watch</li>
<li>improve test output?</li>
<li>phantomJs?</li>
</ul>
</li>
<li>windows<ul>
<li>start webserver</li>
<li>start grunt</li>
<li>install node stuff?</li>
<li>register chrome_bin in path</li>
<li>or register phantomJS?</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

198
src/Umbraco.Web.UI.Client/docs/html/codereviewnotes.html Normal file
View File

@@ -0,0 +1,198 @@
<!DOCTYPE html>
<html>
<head>
<title>doc</title>
<style>
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
pre code {
display: block; padding: 0.5em;
color: #333;
background: #f8f8ff
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
color: #998;
font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
color: #333;
font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
color: #d14
}
pre .title,
pre .id {
color: #900;
font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
font-weight: normal
}
pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
color: #458;
font-weight: bold
}
pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
color: #000080;
font-weight: normal
}
pre .attribute,
pre .variable,
pre .lisp .body {
color: #008080
}
pre .regexp {
color: #009926
}
pre .class {
color: #458;
font-weight: bold
}
pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
color: #990073
}
pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
color: #999;
font-weight: bold
}
pre .deletion {
background: #fdd
}
pre .addition {
background: #dfd
}
pre .diff .change {
background: #0086b3
}
pre .chunk {
color: #aaa
}
</style>
</head>
<body>
<h1>Codereview with Peter Bacon Darwin</h1>
<h2>Office at cogworks:</h2>
<p>71-75 Shelton Street
London
WC2H 9JQ</p>
<p>Meeting room 11 - 17</p>
<h2>Issues to go through:</h2>
<h3>Structure, dependencies and external libraries</h3>
<ul>
<li>review of modules structure and suggestions on how to handle loading things when needed.</li>
<li><p>replace requireJs for dependency loading, so we dont have to load tinyMCE, googlemaps, etc
on app start $script, yepNope, labjs?</p>
</li>
<li><p>get the app to load .aspx pages in an iframe instead of a &quot;normal&quot; view</p>
<ul>
<li>write directive for loading templates to replace ng-include</li>
<li>if .aspx, load in iframe, </li>
<li>if not found try default, finally load error msg </li>
</ul>
</li>
<li>Javascript as resources from dlls? - add a scriptService to load these? - yes
merge those resources into the umbraco.app.js file </li>
</ul>
<p><a href="http://briantford.com/blog/huuuuuge-angular-apps.html">http://briantford.com/blog/huuuuuge-angular-apps.html</a></p>
<h3>Refactoring</h3>
<ul>
<li><p>Convert tree into directive, recursive, lazy-load</p>
<ul>
<li>$watchCollection $watch on the entire tree model</li>
<li>reuse the old tree plugin to inject into dom instead of into angular</li>
<li>10 levels of digest limit</li>
<li>fine for CG, bad for release</li>
</ul>
</li>
<li><p>best practices for directives, what should we convert?</p>
</li>
<li>other areas to convert?<ul>
<li>for guidelines, look at angular/bootstrap-ui</li>
<li>replace our components with ng-bootstrap or angular-strap</li>
</ul>
</li>
</ul>
<h3>Application logic</h3>
<ul>
<li>Authentication, force login, authenticate user against acccess to sections?</li>
<li>whats the best way to handle urls, routes and state management,
so the tree, sections etc, syncs with urls and the state of the application</li>
<li>tinyMCE directive angular-ui </li>
<li>How to handle file-uploads<ul>
<li>through a service?</li>
<li>ng-upload? or jquery-upload-plugin thingy?</li>
</ul>
</li>
<li>validation, ng-form $valid and directives should be enough<ul>
<li>add remote directive: angular-app/admin/users/user-edit.js for directive code</li>
</ul>
</li>
</ul>
<h3>Dev experience</h3>
<ul>
<li><p>H Way to handle templates with missing controller? -&gt; replace ng-include? &lt;- yup
angular-app/samples/directives/fielddirective for code</p>
<ul>
<li>H generel exception handling with feedback to log or notifications service</li>
<li>L jslint code on the server?<br> <a href="http://madskristensen.net/post/Verify-JavaScript-syntax-using-C.aspx">http://madskristensen.net/post/Verify-JavaScript-syntax-using-C.aspx</a></li>
<li>L automated setup of node, grunt, jasmine and karma, powershell and .sh? </li>
</ul>
</li>
</ul>
<h3>Testing</h3>
<ul>
<li>Best way to test against service data, simply mock data in memory, or better way?</li>
<li>Testing dom manipulating components, like modals</li>
<li>e2e testing</li>
<li>teamcity intergration</li>
<li>testing templates</li>
</ul>
<h1>Notes</h1>
<ul>
<li>Javascript as resources? - add a scriptService to load these? nope, they will compile into umbraco.app.js</li>
<li>capture errors with javascript code, to not load it into the combined files
(serverside jsLint) - mads blogpost for compiling js</li>
</ul>
</body>
</html>

178
src/Umbraco.Web.UI.Client/docs/html/namingconventions.html Normal file
View File

@@ -0,0 +1,178 @@
<!DOCTYPE html>
<html>
<head>
<title>doc</title>
<style>
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
pre code {
display: block; padding: 0.5em;
color: #333;
background: #f8f8ff
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
color: #998;
font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
color: #333;
font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
color: #d14
}
pre .title,
pre .id {
color: #900;
font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
font-weight: normal
}
pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
color: #458;
font-weight: bold
}
pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
color: #000080;
font-weight: normal
}
pre .attribute,
pre .variable,
pre .lisp .body {
color: #008080
}
pre .regexp {
color: #009926
}
pre .class {
color: #458;
font-weight: bold
}
pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
color: #990073
}
pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
color: #999;
font-weight: bold
}
pre .deletion {
background: #fdd
}
pre .addition {
background: #dfd
}
pre .diff .change {
background: #0086b3
}
pre .chunk {
color: #aaa
}
</style>
</head>
<body>
<h1>Naming conventions</h1>
<h2>modules handle namespacing,</h2>
<p>Naming: last one wins
but to do this automaticly, we would need
to auto-register all modules needed on app-start.
This gives us a couple of complications for handling 3rd party applications.
As it would be a pain to scan every file for modules to load on app start.</p>
<p>Proposed structure:
<a href="http://briantford.com/blog/huuuuuge-angular-apps.html">http://briantford.com/blog/huuuuuge-angular-apps.html</a></p>
<p>Register all modules in app.js
Root module: Umbraco
- contains the core services: notifications,dialogs,etc
- contains the core resources: content,media etc
- contains the core directives</p>
<p>1 module pr file princible</p>
<p>1st level modules:
Umbraco (for misc system-level stuff, dialogs, notifications, etc)
Umbraco.PropertyEditors (for all editors, as they are shared between all modules)
- how would a 3rd party property editor access a 3rd party service in the Ucommerce module, when its loaded in the content editor? (which is inside the the content module?)
Umbraco.Content (registers that it needs umbraco module, for access to core services )
Umbraco.Media
Umbraco.Settings
Ucommerce
TeaCommerce
Etc</p>
<p>Should all (core + 3rd party) services, filters and directives just be dependencies in the global umbraco module?</p>
<p>Each section namespace knows what modules to initially have loaded:
Umbraco.Content
- EditController
- SortController</p>
<p>Inside the EditController module, it references the needed services:
- DialogService
- ContentFactory
- Etc</p>
<p>So things are only loaded when needed, due to the modules, and our application, really only needs to know about the root modules, Content,Media,Settings, Ucommerce etc.</p>
<h2>Directives</h2>
<p>If more directives have the same name, they will all be run</p>
<h2>Controllers</h2>
<p>Last one wins, so you can override core controllers
Can be namedspaced, but shouldnt, the module is the namespace?
Module: Umbraco.Section.Area.Page
Name: PageNameController</p>
<p>Filename: /umbraco/section/area/pagename.controller.js
Ex: /umbraco/content/document/edit.controller.js
Ex: /umbraco/settings/documenttype/edit.controller.js</p>
<p>There is a need to have an extra level in the content tree urls due to all
other sections have this as well, and we dont want to confuse the routing.</p>
<p>The ctrl acronym is horrible and should not be used IMO.</p>
<h2>Services</h2>
<p>typeService ? - cant be namespaced
Module: Umbraco.Services.Type
Name: TypeService?</p>
<p>Ex: Umbraco.Services.Notifications.NotificationsService
Filename: /umbraco/common/services/notifcations.service.js</p>
<h2>Resources</h2>
<ul>
<li>Content, media, etc, cant be namespaced:
Module: Umbraco.Resources.Type
Name: TypeFactory?</li>
</ul>
<p>Ex: Umbraco.Resources.Content.ContentFactory?
filename: /umbraco/common/resources/content.resources.js ? or
/umbraco/common/resoures/content.factory.js ?</p>
</body>
</html>

147
src/Umbraco.Web.UI.Client/docs/html/readme.html Normal file
View File

@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<title>doc</title>
<style>
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
pre code {
display: block; padding: 0.5em;
color: #333;
background: #f8f8ff
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
color: #998;
font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
color: #333;
font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
color: #d14
}
pre .title,
pre .id {
color: #900;
font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
font-weight: normal
}
pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
color: #458;
font-weight: bold
}
pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
color: #000080;
font-weight: normal
}
pre .attribute,
pre .variable,
pre .lisp .body {
color: #008080
}
pre .regexp {
color: #009926
}
pre .class {
color: #458;
font-weight: bold
}
pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
color: #990073
}
pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
color: #999;
font-weight: bold
}
pre .deletion {
background: #fdd
}
pre .addition {
background: #dfd
}
pre .diff .change {
background: #0086b3
}
pre .chunk {
color: #aaa
}
</style>
</head>
<body>
<h1>Getting up and running with Belle</h1>
<p><em>The super fast introduction to getting belle running on your local machine, both as a pre-built environment, and with the full setup with unit-tests, grunt-tasks and node.</em></p>
<h2>Running the prebuilt site</h2>
<h3>Windows</h3>
<p>Right-click the <code>/build</code> folder and choose &quot;open in webmatrix&quot;, run the website in webmatrix and browse to <code>localhost:xxxx/Belle/</code>, this should display the Belle login screen</p>
<h3>OSX</h3>
<p>Open a terminal inside the &quot;/build&quot; folder and run the command:</p>
<pre><code>python -m SimpleHTTPServer 8080</code></pre>
<p>This will start a local webserver, hosting the site on <code>localhost:8080</code> browse to localhost:8080/Belle/ which should display the belle login screen.</p>
<h2>Uing the dev environment</h2>
<p><em>The dev environment is tad more tricky to get running, since it depends on a number of unit tests and automated tools, to produce the contents of the /build folder</em></p>
<p><em>The dev environment is cross platform, so will work on both osx and windows, and do not currently have any dependencies to .net</em></p>
<h3>Install node.js</h3>
<p>We need node to run tests and automated less compiling and other automated tasks. go to <a href="http://nodejs.org">http://nodejs.org</a>. Node.js is a powerfull javascript engine, which allows us to run all our tests and tasks written in javascript locally.</p>
<p><em>note:</em> On windows you might need to restart explorer.exe to register node.</p>
<h3>Install dependencies</h3>
<p>Next we need to install all the required packages. This is done with the package tool, included with node.js, open /Umbraco.Belle.Client in cmd.exe or osx terminal and run the command:</p>
<pre><code>npm install</code></pre>
<p>this will fetch all needed packages to your local machine.</p>
<h3>Install grunt globally</h3>
<p>Grunt is a task runner for node.js, and we use it for all automated tasks in the build process. For convenience we need to install it globally on your machine, so it can be used directly in cmd.exe or the terminal.</p>
<p>So run the command:</p>
<pre><code>npm install grunt-cli -g</code></pre>
<p><em>note:</em> On windows you might need to restart explorer.exe to register the grunt cmd.</p>
<p><em>note:</em> On OSX you might need to run:</p>
<pre><code>sudo npm install grunt-cli -g</code></pre>
<p>Now that you have node and grunt installed, you can open <code>/Umbraco.Belle.Client</code> in either <code>cmd.exe</code> or terminal and run: </p>
<pre><code>grunt</code></pre>
<p>This will build the site, merge less files, run tests and create the /Build folder.</p>
<h3>Automated builds and tests</h3>
<p>If you prefer to do test-driven developement, or just dont want to manually run <code>grunt</code> on every change, you can simply tell grunt to watch for any changes made in the project, by running:</p>
<pre><code>grunt watch</code></pre>
</body>
</html>

176
src/Umbraco.Web.UI.Client/docs/html/todo.html Normal file
View File

@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html>
<head>
<title>doc</title>
<style>
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
pre code {
display: block; padding: 0.5em;
color: #333;
background: #f8f8ff
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
color: #998;
font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
color: #333;
font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
color: #d14
}
pre .title,
pre .id {
color: #900;
font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
font-weight: normal
}
pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
color: #458;
font-weight: bold
}
pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
color: #000080;
font-weight: normal
}
pre .attribute,
pre .variable,
pre .lisp .body {
color: #008080
}
pre .regexp {
color: #009926
}
pre .class {
color: #458;
font-weight: bold
}
pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
color: #990073
}
pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
color: #999;
font-weight: bold
}
pre .deletion {
background: #fdd
}
pre .addition {
background: #dfd
}
pre .diff .change {
background: #0086b3
}
pre .chunk {
color: #aaa
}
</style>
</head>
<body>
<h1>Things to do</h1>
<h2>Structure</h2>
<ul>
<li>One module pr file idea, instead of registering everything on app.js</li>
<li><p>Have core services, resources and other common items under umbraco</p>
</li>
<li><p>third party modules outside of the root umbraco module, but registered in app.js</p>
</li>
<li><p>to access 3rd party service:
ecomEditor.controller.js
angular.module(&quot;umbraco.myeditor&quot;, [&quot;ecommerce.services&quot;]).controller(&quot;ecom.editor&quot;, </p>
<pre><code> function(&quot;inventoryFactory&quot;){
do things...
});</code></pre>
</li>
<li><p>best way to setup services and controllers are:
.controller(&quot;name&quot;,[
&quot;service&quot;,
&quot;dependency&quot;,
function(s, d){</p>
<p> }
]);</p>
</li>
<li><p>move logic from controllers to services, especcially around navigation</p>
<ul>
<li>easier for testing</li>
<li>only keep view interactions, everything into a service</li>
<li>looser testing on controllers</li>
<li>for testing the dialogs, look in angular source or angular bootstrap projects</li>
</ul>
</li>
</ul>
<h2>Routing</h2>
<p>Change /section/page/id to /section/area/page/id to support all section scenarios
Have a fallback to defaults?</p>
<h2>Legacy</h2>
<ul>
<li>for UmbClientTools we can access the services in angular from
angular.element(&quot;body&quot;).injector().get(&quot;notifications&quot;);</li>
<li>rootscope available in same location</li>
<li>the bootstrap method returns the injector</li>
</ul>
<h2>ScriptLoaderService</h2>
<pre><code>- Service to load required scripts for a controller using $script
- remove requirejs dependency as it makes things muddy</code></pre>
<h2>Authentication</h2>
<p>Angular-app: common/security/interceptor.js , intercept http requests</p>
<h2>Promises</h2>
<pre><code>Use promises pattern for all our services
$http.get(url)
.then(function(response){
return response.data;
}, function(response){
return $q.reject(&quot;http failed&quot;);
}).then(function(data){
alert(&quot;our data:&quot; + data);
})</code></pre>
<h2>Think about rest services and authentication</h2>
<p>Usecase: member picker editor, which fetches member-data</p>
<h2>Avoid $resource and instead use $http</h2>
<p>Sublime linter</p>
</body>
</html>

35
src/Umbraco.Web.UI.Client/docs/src/belleLabTasks.md Normal file
View File

@@ -0,0 +1,35 @@
#Belle Lab Tasks
##Applcation Structure
- Work on dialogs, plenty to choose from
- A reuseable tree component for pickers
- migrate all the navigation stuff into a navigation service
- a scriptloading service to replace requireJs, with labJs, $script or similiar
- reusable modal component (show in left side, right side, generic closing events etc)
##Components
- tabs directive
- date picker
- tabs property editor
- localization strategy?
- localize filter: {{This is my default english value,content.area.key | localize}}
- So, it will use the default value if there is none found for the key, and register this
value in the localize service, keys should not contain commas
##Chores
- Write a test
- Write docs
- Automate something
- OSX:
- start webserver
- start grunt watch
- improve test output?
- phantomJs?
- windows
- start webserver
- start grunt
- install node stuff?
- register chrome_bin in path
- or register phantomJS?

10
src/Umbraco.Web.UI.Client/docs/src/blogposts/Belle Lab in aarhus.md Normal file
View File

@@ -0,0 +1,10 @@
#Belle Lab in Aarhus, May 28th
*Today was the first day with an open belle lab event, kindly hosted by the great people at Illumi in Aarhus. It was the first time the Belle prototype really got into the hands of developers, with the primary goal of getting people up and running and contributing*
The day kicked off with a fast and condensed introduction to belle and AngularJS, the JS framework we've decided to build belle on, afterwards, the event split into 2 tracks.
- 1 group focused on working on the conceptual level in regards to user experience
- the other focused on diving into the codebase and getting familiar with the new approach to extending the backoffice.

73
src/Umbraco.Web.UI.Client/docs/src/codereviewnotes.md Normal file
View File

@@ -0,0 +1,73 @@
#Codereview with Peter Bacon Darwin
##Office at cogworks:
71-75 Shelton Street
London
WC2H 9JQ
Meeting room 11 - 17
##Issues to go through:
###Structure, dependencies and external libraries
* review of modules structure and suggestions on how to handle loading things when needed.
* replace requireJs for dependency loading, so we dont have to load tinyMCE, googlemaps, etc
on app start $script, yepNope, labjs?
* get the app to load .aspx pages in an iframe instead of a "normal" view
- write directive for loading templates to replace ng-include
- if .aspx, load in iframe,
- if not found try default, finally load error msg
* Javascript as resources from dlls? - add a scriptService to load these? - yes
merge those resources into the umbraco.app.js file
http://briantford.com/blog/huuuuuge-angular-apps.html
###Refactoring
* Convert tree into directive, recursive, lazy-load
- $watchCollection $watch on the entire tree model
- reuse the old tree plugin to inject into dom instead of into angular
- 10 levels of digest limit
- fine for CG, bad for release
* best practices for directives, what should we convert?
* other areas to convert?
- for guidelines, look at angular/bootstrap-ui
- replace our components with ng-bootstrap or angular-strap
###Application logic
* Authentication, force login, authenticate user against acccess to sections?
* whats the best way to handle urls, routes and state management,
so the tree, sections etc, syncs with urls and the state of the application
* tinyMCE directive angular-ui
* How to handle file-uploads
- through a service?
- ng-upload? or jquery-upload-plugin thingy?
* validation, ng-form $valid and directives should be enough
- add remote directive: angular-app/admin/users/user-edit.js for directive code
###Dev experience
* H Way to handle templates with missing controller? -> replace ng-include? <- yup
angular-app/samples/directives/fielddirective for code
* H generel exception handling with feedback to log or notifications service
* L jslint code on the server?
http://madskristensen.net/post/Verify-JavaScript-syntax-using-C.aspx
- L automated setup of node, grunt, jasmine and karma, powershell and .sh?
###Testing
* Best way to test against service data, simply mock data in memory, or better way?
* Testing dom manipulating components, like modals
* e2e testing
- teamcity intergration
- testing templates
#Notes
- Javascript as resources? - add a scriptService to load these? nope, they will compile into umbraco.app.js
- capture errors with javascript code, to not load it into the combined files
(serverside jsLint) - mads blogpost for compiling js

86
src/Umbraco.Web.UI.Client/docs/src/namingconventions.md Normal file
View File

@@ -0,0 +1,86 @@
#Naming conventions
##modules handle namespacing,
Naming: last one wins
but to do this automaticly, we would need
to auto-register all modules needed on app-start.
This gives us a couple of complications for handling 3rd party applications.
As it would be a pain to scan every file for modules to load on app start.
Proposed structure:
http://briantford.com/blog/huuuuuge-angular-apps.html
Register all modules in app.js
Root module: Umbraco
- contains the core services: notifications,dialogs,etc
- contains the core resources: content,media etc
- contains the core directives
1 module pr file princible
1st level modules:
Umbraco (for misc system-level stuff, dialogs, notifications, etc)
Umbraco.PropertyEditors (for all editors, as they are shared between all modules)
- how would a 3rd party property editor access a 3rd party service in the Ucommerce module, when its loaded in the content editor? (which is inside the the content module?)
Umbraco.Content (registers that it needs umbraco module, for access to core services )
Umbraco.Media
Umbraco.Settings
Ucommerce
TeaCommerce
Etc
Should all (core + 3rd party) services, filters and directives just be dependencies in the global umbraco module?
Each section namespace knows what modules to initially have loaded:
Umbraco.Content
- EditController
- SortController
Inside the EditController module, it references the needed services:
- DialogService
- ContentFactory
- Etc
So things are only loaded when needed, due to the modules, and our application, really only needs to know about the root modules, Content,Media,Settings, Ucommerce etc.
##Directives
If more directives have the same name, they will all be run
##Controllers
Last one wins, so you can override core controllers
Can be namedspaced, but shouldnt, the module is the namespace?
Module: Umbraco.Section.Area.Page
Name: PageNameController
Filename: /umbraco/section/area/pagename.controller.js
Ex: /umbraco/content/document/edit.controller.js
Ex: /umbraco/settings/documenttype/edit.controller.js
There is a need to have an extra level in the content tree urls due to all
other sections have this as well, and we dont want to confuse the routing.
The ctrl acronym is horrible and should not be used IMO.
##Services
typeService ? - cant be namespaced
Module: Umbraco.Services.Type
Name: TypeService?
Ex: Umbraco.Services.Notifications.NotificationsService
Filename: /umbraco/common/services/notifcations.service.js
##Resources
- Content, media, etc, cant be namespaced:
Module: Umbraco.Resources.Type
Name: TypeFactory?
Ex: Umbraco.Resources.Content.ContentFactory?
filename: /umbraco/common/resources/content.resources.js ? or
/umbraco/common/resoures/content.factory.js ?

64
src/Umbraco.Web.UI.Client/docs/src/readme.md Normal file
View File

@@ -0,0 +1,64 @@
#Getting up and running with Belle
_The super fast introduction to getting belle running on your local machine, both as a pre-built environment, and with the full setup with unit-tests, grunt-tasks and node._
##Running the prebuilt site
###Windows
Right-click the `/build` folder and choose "open in webmatrix", run the website in webmatrix and browse to `localhost:xxxx/Belle/`, this should display the Belle login screen
###OSX
Open a terminal inside the "/build" folder and run the command:
python -m SimpleHTTPServer 8080
This will start a local webserver, hosting the site on `localhost:8080` browse to localhost:8080/Belle/ which should display the belle login screen.
##Uing the dev environment
_The dev environment is tad more tricky to get running, since it depends on a number of unit tests and automated tools, to produce the contents of the /build folder_
_The dev environment is cross platform, so will work on both osx and windows, and do not currently have any dependencies to .net_
###Install node.js
We need node to run tests and automated less compiling and other automated tasks. go to http://nodejs.org. Node.js is a powerfull javascript engine, which allows us to run all our tests and tasks written in javascript locally.
*note:* On windows you might need to restart explorer.exe to register node.
###Install dependencies
Next we need to install all the required packages. This is done with the package tool, included with node.js, open /Umbraco.Belle.Client in cmd.exe or osx terminal and run the command:
npm install
this will fetch all needed packages to your local machine.
###Install grunt globally
Grunt is a task runner for node.js, and we use it for all automated tasks in the build process. For convenience we need to install it globally on your machine, so it can be used directly in cmd.exe or the terminal.
So run the command:
npm install grunt-cli -g
*note:* On windows you might need to restart explorer.exe to register the grunt cmd.
*note:* On OSX you might need to run:
sudo npm install grunt-cli -g
Now that you have node and grunt installed, you can open `/Umbraco.Belle.Client` in either `cmd.exe` or terminal and run:
grunt
This will build the site, merge less files, run tests and create the /Build folder.
###Automated builds and tests
If you prefer to do test-driven developement, or just dont want to manually run `grunt` on every change, you can simply tell grunt to watch for any changes made in the project, by running:
grunt watch

65
src/Umbraco.Web.UI.Client/docs/src/todo.md Normal file
View File

@@ -0,0 +1,65 @@
#Things to do
##Structure
- One module pr file idea, instead of registering everything on app.js
- Have core services, resources and other common items under umbraco
- third party modules outside of the root umbraco module, but registered in app.js
- to access 3rd party service:
ecomEditor.controller.js
angular.module("umbraco.myeditor", ["ecommerce.services"]).controller("ecom.editor",
function("inventoryFactory"){
do things...
});
- best way to setup services and controllers are:
.controller("name",[
"service",
"dependency",
function(s, d){
}
]);
- move logic from controllers to services, especcially around navigation
- easier for testing
- only keep view interactions, everything into a service
- looser testing on controllers
- for testing the dialogs, look in angular source or angular bootstrap projects
##Routing
Change /section/page/id to /section/area/page/id to support all section scenarios
Have a fallback to defaults?
##Legacy
- for UmbClientTools we can access the services in angular from
angular.element("body").injector().get("notifications");
- rootscope available in same location
- the bootstrap method returns the injector
##ScriptLoaderService
- Service to load required scripts for a controller using $script
- remove requirejs dependency as it makes things muddy
##Authentication
Angular-app: common/security/interceptor.js , intercept http requests
##Promises
Use promises pattern for all our services
$http.get(url)
.then(function(response){
return response.data;
}, function(response){
return $q.reject("http failed");
}).then(function(data){
alert("our data:" + data);
})
##Think about rest services and authentication
Usecase: member picker editor, which fetches member-data
##Avoid $resource and instead use $http
Sublime linter