Dojo Application - How to - javascript

Do any of you know any reasonably good resources containing methods and tutorials to help build a Dojo driven entirely AJAX application. I have been searching Google and the Dojo Toolkit web page however not many resources seem to tie everything together..
Thanks in advance,

If you are familiar with Dojo principles the best way would be studying working source code. There is nicely commented github project dojo-boilerplate to start with. It provides, well, boilerplate code to start building a single page javascript application including preconfigured build system. Unfortunately - afaik - build scripts based on Java neither node.js does not work under Windows as of now (not even under MinGW or Cygwin due path resolving issues).
Aforementioned branch uses AMD modules new to Dojo 1.7+, for previous Dojo version employing synchronous loader use this branch.
Also have a look at build.dojotoolkit.org and check out its source code.
Last but not least, don't forget books. You can find those I prefer in my Career 2.0 Profile.

Related

Can I use EmberJS or other frameworks without gettting its server up?

I want a javascript framework which has features like below:
MV*
Well structured
Html file as template
Rendering fast(maybe virtual dom?)
Combine and compatible with other plugins or libraries
Edit on tablet IDE apps and view in browser immediately by refreshing page after I changed code
When I am at home, I use PC to develop my client-side(or front-end) applications.
When go out, I use my tablet(I have no note PC), so I want to develop my applications outside.
*There are some excellent IDE apps on the Android Market.
Before I know Ember, I have been using pure javascript(jquery) + css + html to develop client-side application for daily practices or work.
But recently, when I began to learn EmberJS, a Javascript MVC framwork, I am lost.
It seems that EmberJS have to get its own server up to compile something, which generate static contents for browser rendering.
I just want to get my client-side code(files) rendering in the browser, but why I have to 'run' it as if I get apache started to serve as a php back-end.
I have googled hundreds of pages to find a solution, nothing expected result discovered.
Including Angular, backbone or any other popular Javascript MV* frameworks, they all must compile there applications.
Is there anyone who has encountered this situation?
Then any advice, please?
Increasingly most Javascript frameworks are shifting to doing a "compile step" as part of using them. This allows you to do a variety of changes to your Javascript files, which in turn makes it easier for you as a developer. An example of this is that you can use ES2015 classes and then have your compile step "transpile" them to older Javascript that will work in all browsers.
The side effect of this though is that you need to have npm running on your computer to be able to do this well.
If you really don't want to have the compile step, then I would suggest looking at VueJS. It's the only recent Javascript framework that allows working with simple non-compiled JS files. But you'all be missing out on some of the best changes to Javascript as a result (ES2015 has made life much better)
Finally, I found a nice solution(framework) that is Durandal.
Really, pure HTML+Javascript without built and server up(anyhow, a web server needed if I wanted to publish it in my hosted web server).
.html extension and designer friendly.
I can upload its source files directly in to S3 and browse the html pages.
Just found some nice examples with well structured project on github is here.
And I can work smoothly with my dear designer friends.
Though its next generation Aurelia will also be built and serve it up like Ember or others, but the current generation is enough for me.
Hope those one got help from this;)

Proper use of React JS & JavaScript libraries

I'm working in a small agency and we build multilingual websites that are complex enough to have me thinking about using a JS library, but not big enough to be considered a "Web App". We have developed our own "stack" that includes WordPress as the CMS and multiple tools (PHP module loader, JavaScript module loader, css preprocessors, build tool, etc.)
Most of our sites have various modules and forms that are used in multiple pages. For example in our current project one of this module makes several calls to an API and there are multiple event bindings to do in each pages.
I was considering using BackboneJS but feel like it's a bit overhead for this kind of project. Then I looked in React but since the modules doesn't always require to repaint the DOM, I wasn't sure it would be used properly. I care a lot about producing optimal and maintainable code (don't want to put everything in one big js file) so I'd like to find a solution. Unfortunately most documentations and examples I found for these libraries were for one-page apps or projects with only one module so it didn't help.
Anybody have suggestions as to what to use? Someone in a similar situation committed to a library and could give some feedback?
Thanks!

Dart with desktop HTML application frameworks

I'm planning to create a cross platform desktop application with Dart.
Because there's no ready built frameworks supporting Dart yet, i have to compile Dart to Javascript first.
I cannot develop completly in Dartium since the desktop frameworks built around HTML5 provide some custom Javascript API's (file system access, native library support, etc.) which i'm planning to use.
I've found the following frameworks which might suit my needs but i'm looking for best practices when developing with Dart.
node-webkit: a fusion of Node and the Webkit browser engine. Provides many packages in the form of NPM. Node and Webkit shares the same thread so it's efficient in terms of communication between the different worlds. Writing and accessing native modules from Javascript seems problematic. Has good documentation. There's node-webkit.dart to access some of the API's from Dart.
XULRunner: The Gecko engine behind Mozilla products as a reusable framework. Provides it's very own UI descriptor (XUL). Has an easier support for native modules (js-ctypes). Seems well documented on MDN. No Dart library written to support development yet.
TideKit/TideSDK: Supports many languages (Dart might be supported later on [link] [link]). Built around Webkit. Seems well documented. Cannot seem to find pub packages supporting it.
Maybe there are some other options i haven't seen yet. I've excluded projects like AppJs (dead), and Cappucino (OSX only).
One option is the Electron framework. Originally created by GitHub for their Atom editor, it allows you to build cross-platform applications for Linux, OS X, or Windows, using web technologies. There is an available Dart wrapper as well. However, this wrapper lacks complete support for the API, and doesn't appear to be under active development.
Another method of using Electron is to call all the electron and node methods via dart:js interop. I've had more success with this method than the library.
Electron uses a main process, stored in main.js, to run the app, and create new BrowserWindows, which load your html. I've found it easier to simply write this file in Javascript, as wrapping too many JS methods is a pain, and this script is relatively light. However, you can use a main.dart file and simply build it with dart2js. Electron will be happy as long as it can find a main.js file.
You can essentially build pages for the app just as you would a regular webpage. You can write it in dart, debug in Dartium, and compile to Javascript for testing it in your app. Of course, your code can't access node APIs from the browser, so you'll have to build the app every time you want to use these. (If anyone has a better way, please point it out!)
One final caveat: Dart's IO libraries won't work with Electron. This is a bit of a drawback, as accessing files is important for pretty much any application. Your best bet will be to use node's filesystem library through dart-js interop. At times, this may feel like a bit of a hack (for example, when working with callbacks), but it gets the job done.
There is the first option.
Chrome Packaged App
You can write Chrome Packaged App with Dart.
dart2js makes it possible to compile dart code to javascript.
and thanks to chrome.dart package, chrome APIs are availble.
Spark is nice example. See https://github.com/dart-lang/spark

New to PhoneGap, need guidance to get started

Ok, I've been in planning for developing a PhoneGap app for a few months, and it's come time for me to start coding. There are a few things I am confused about that I need to clear up before I can get going, because things don't seem to be going well.
To begin, I am using PhoneGap to build this app because I plan to release it to multiple platforms (primarily iOS and Android) and based on the tutorials for Objective-C that I've read, I'd much rather use JavaScript/jQuery/jQueryMobile to develop the app. If anyone thinks that these are not appropriate reasons to be using PhoneGap and that I should be using something else, please let me know.
I seem to be misunderstanding some things that are apparently self-explanatory about PhoneGap, and after hours of scouring the internet looking for answers, I can't seem to find anyone else who has had the same problems as me. To clarify, I am quite comfortable with my HTML/CSS/JavaScript skills. I literally just need to GET STARTED.
I see the terms PhoneGap and Cordova used interchangeably. From the sources I've seen they are pretty much synonymous, but I'd like to know what the ACTUAL difference is.
I'm fairly certain I have PhoneGap installed. I can run PhoneGap commands and I was able to get the basic Hello World application and run it on an iPhone emulator. I then began to make changes to the files and rebuilt and reinstalled to test it and it replaced all my changes with the original application. I'm not sure what I did wrong, but I feel like I'm missing something.
Can I use other JavaScript libraries like jQuery or jQuery Mobile with PhoneGap? I'm not sure what I'm limited to, or if I can use them, what the best way is to do that.
I've seen example applications that were able to use PHP even though many sources say that you can't. How is this done?
Can multiple pages be used or is it better to modify one to make it seem like there are multiple pages?
Any other suggestions on exactly how to get started will help. Thanks!
Only edit the files in your www folder, because when you run
phonegap build ios
it copies files from the www folder into the various different platform folders (depending on which platforms you've added) and compiles an application out of them.
http://www.tricedesigns.com/ - lots of sample apps and tutorials
http://www.raymondcamden.com/ - ditto
http://coenraets.org/blog/ - ditto
http://devgirl.org/ - tutorials
https://groups.google.com/forum/#!forum/phonegap - official group
Cordova is the open source community driven version of the framework, Phonegap is a "snapshot" of cordova at a given point that Adobe specifically supports through it's build service, there are small differences but on the whole they're more or less identical in feature set and use.
You can use any JS libraries you want, and you'd use them exactly as you would normally on the web.
PHP code cannot be used inside a phonegap/cordova app but there's nothing to stop you loading data from external sources.
Regarding multiple pages, I'd generally stick with a single page and just show/hide parts of it as needed, just so you're not having to deal with re-loading libraries on each page load and adding overhead to the app itself.
As for where to start - there's a few good books out there but you could do worse than to give this tutorial a go..
http://coenraets.org/blog/phonegap-tutorial/

Preloading Ext JS & custom JavaScript files at application boot time

I'm creating an intranet application, the UI of which premoninently uses Ext JS 4.1.1
I have created several custom javascript classes extending Ext JS controls and other code for UI, validation, communication, etc.
Given that my code is not very huge and that my application will be deployed in a controlled & well known environment I'd ideally like to load all .js files upfront at the time of application invokation (boot). I'd like to know an approach to achieve this, mostly from within the relm of Ext JS.
What you want to do is something really usual. Take a look at the deployment section to know how to use the Sencha SDK to create one file containing all your custom javascript classes which extend extjs component here
I hope it is useful ;)
As of this month Sencha (beta) released a revamped build tool. Actually, it is a complete rewrite in Java (I believe). Sencha Cmd is the name, and it is all that the predecessor should have been!
Compile times have been crunched to maybe a 10th of its predecessor and packages/builds are now configured using a powerful command processor.
Integration into other build frameworks and CI servers is now a top priority and achieved by integrating the tool with ANT.
I just spent the past hours to migrate a project from the old Sencha SDK Tools to the new Sencha Cmd. I particularly love the new compiler.
Documentation is already pretty good.
Blog post that introduced Sencha Cmd
Official SDK documentation - there is a total of 10 articles on the subject, don't miss them, particularly the
Compiler documentation
For smaller projects that follow the standard (single-page) pattern suggested by Sencha, there is actually a range of higher-level commands that manage the entire application creation and build process.
Furthermore, Sencha has now a pattern in place for multi-page applications.
And you can always use the compiler directly and implement your own build process on top of it. That's what we did in our project.
There is one class called Ext.Loader
This is more of a server-side question than an Ext JS question. You want to include all your pages up-front? Get a JavaScript compressor to concatenate your files together, minify the whole pack, and add a <script> tag to every page in your web app.
I also work on an intranet web app that heavily uses Ext JS (both 3 and 4), but we have quite a large codebase. Since we use Tomcat, we have a Java class that includes standard files on each page, plus any file groups or individual files we need for that page. Something like that might work for you as well.
You can use Ext.Loader for dynamic loading when you need it, but that doesn't sounds like what you're looking for. Still an option though, should your codebase expand and you need a better solution.
EDIT: As mentioned in the comments, my original answer failed to address the Sencha SDK Tools. I felt it would be more beneficial to make my response part of my revised answer.
While this task may be exactly what the Sencha SDK was designed for, I feel that the product is not yet mature enough for production environments. At the time of writing, the current version is 2.0.0 Beta 3. Beta, meaning it's still under development, and it shows. Documentation is practically non-existent and the official forums are full of topics claiming the product simply does not work. At this point, it's nothing more than a toy to be played with. The most helpful document I've seen is Sencha SDK Tools 2.0 and ExtJS4: The Missing Docs, and the author even ends with "The SDK Tools need a lot of work."
When I'm choosing a product for a production environment, I want something stable, something reliable, something with good documentation, something with quality support. The Sencha SDK Tools are none of those things. Yet.

Categories

Resources