I started working with sample sencha apps. I find it really hard to find typo and errors in my code.
I added the eclipse plugin for auto-complete during coding. Buts its a trial version just like the sencha architect. Am really confused on how the sencha app should be developed.
I want to know the tools that sencha developers are using so that I can deploy and debug effeciently.
Thanks in advance.
The workflow / tools choice when developing an application is a subjective matter so I'm going to talk about my experience, having been a Sencha Touch developer for the last year.
I find it really hard to find typo and errors in my code.
...
Am really confused on how the sencha app should be developed.
This is not a matter of tools in my opinion. Sencha Touch has an unavoidable steep learning curve. You should start with simple examples, and you could ask here when you have specific programming issues (I personally found Sencha Touch forums less useful than stackoverflow).
The most important thing is understanding the basics concepts:
Sencha Touch class system (http://www.sencha.com/learn/sencha-class-system),
How Sencha implements MVC (http://docs.sencha.com/touch/2.2.1/#!/guide/controllers)
(http://docs.sencha.com/touch/2.2.1/#!/guide/views),
Sencha Touch Layouts (http://docs.sencha.com/touch/2.2.1/#!/guide/layouts),
Sencha Touch Components (http://docs.sencha.com/touch/2.2.1/#!/guide/components)
Also all of these guides will be very useful, make sure you understand them and learn to use Sencha Docs, which definetely has some obscure, non explained properties, but should still be your main resource when developing a Sencha Touch app.
Debugging will always be tricky, unfortunately sometimes setting the wrong property on a Component, or misunderstanding how a Component is meant to work, ends up with some obscure var is not defined error. Do not fear to check Sencha Touch source code when this happens, code is well written and usually easy to understand.
Here the tools to use are again Sencha Touch Docs (when hovering on a class title you can examine directly its source code, plus your browser debugging console. Use frequent console.debug() messages, and when something weird happens inside framework classes stop execution with debugger; and step inside source code).
Now back to your question: I have been using the following tools:
NetBeans,
Chrome DevTools,
Chrome Ripple Extension,
Sencha Command (optional)
Compass CSS authoring framework
a couple shell scripts
The IDE is a matter of personal choice, Netbeans has some nice Javascript suggestions: it highlights variables when they are used but not defined in the current scope, or defined but not used, which really helps a lot against typos. It is very heavy in terms of memory usage. I guess Eclipse, or even a lighter one could be equally good.
Chrome is kinda a forced choice if you are on Windows, their DevTools are excellent, make sure you master them, they will be your main working tools. Once again: lot of RAM helps.
Ripple is an invaluable extension that allows you to test your mobile app on different devices and if you are using Phonegap for native deployment it emulates a part of its API on the browser.
Compass is the tool suggested by Sencha to compile their sass files. There is a detailed tutorial on how to setup compass on Sencha Docs.
I have been using Sencha Command but it's not strictly necessary, if you don't care about resources minification (but you should) you will not miss much about it. If you are developing a native app you can make up for the lack of Sencha Command deploy function with a simple shell script that copies html/js/css resources to the assets folder of your Phonegap project.
Another script activates automatically compass watch on the /resources/sass folder at startup, to avoid having to manually do that each time.
Just my two cents, hope it helps.
Anubis covered majority of the bee knees in hand coding Sencha Touch.
I'd like to add a couple more cents into the kitty.
My personal preference for IDE is Sublime Text. Searching through entire projects of code for anything, I've not seen an equal for effectiveness and speed. You can customise everything - especially colours and keybindings. It also has a ludicrous wealth of plugins, including working in correlation to Chrome, as well as Github.
SENCHA GUIDES
Miami Coder Tutorials - great collection of practical tutorials which will help you understand development patterns faster than most other guides. Great for starters.
Figleaf Training can be a little unconventional, but a great free means of learning Sencha Touch and almost everything it is capable of. Great for starters too.
Druck IT - solid collection of guides and ST information. Has links to many other useful sites such as these listed.
Mitchell Simoens - Mitchell is Sencha staff, a quality coder, and his site has some great advice and snippets to help learn. This is where you'll truly learn how to code ST well. Helps towards getting a grasp, but mainly for mid+ knowledge.
Ladysign - one of the Sencha Trainers. Has content that clears up "how to" in many facets other sites and books never even mention. Quality information. This info will get you above basic and flesh out your knowledge and understanding.
Modus Create - Jay Garcia is one of the devs of ST. Modus Create is his enterprise, which contains some useful guides within the blog.
Custom Font Icons - complete guide for 2.2. Very useful.
There's a few other sites that were incredible sources of tidbits through to information on how to code ST professionally. These links above will help immensely though. Above all, read the source code. It is very well documented, as well as being an example in itself of how to use the code. I have learnt ludicrous amounts this way.
GRUNT (with NPM/Node.js)!
Use Grunt! This will automate the vast majority of what you want to do. For example, typing "grunt" in the command line could jshint/jslint your code, concatenate all .js files together, all css files together (including all the compass joy), obfuscate, compress, run a comprehensive set of unit tests (especially Phantom), output to desired location, then add a cherry on top by refreshing your browser window. Add in the grunt watch plugin, and it'll do that every time a file is saved in defined directories. Any bugs in your code - you get accurate specific line numbers where it is broken.
The beauty of grunt is extended by optional alternate commandlines for different tasks. Also, you can specify in the package.json file of a few kB the precise list of plugins you wish to use with the gruntfile you've created, saving megabytes of file transfer. NPM can process that file, and download and install all that is required to operate. Makes for fast setup on another computer.
Side note: Touch Node has come of age. This permits all ST's class structure to develop your serverside javascript.
Want to include Sencha Cmd?
Sencha Cmd (finally) does do a decent job of collecting only the dependent classes from the full library.
grunt-sencha-build
grunt-senchacmd
Alternative for Sencha Cmd
Extend Grunt with Matt Goldspink's grunt-sencha-dependencies which works for both ST and ExtJS, or use grunt-sencha-resolver - this latter one I haven't used.
Related
Google knows best… but they're inconsistent!
The official ng CLI generates a scaffold one way, whereas the official tutorial chooses a different way.
I'm not talking just directory layout, typings.json vs types in package.json choices are also particularly worrisome.
What style am I meant to work with?
Angular 2's tutorial basically just shows the quickest and easiest way to get up and running with the framework. It omits mentioning things that could scare away a potential newcomer to the ecosystem, it is meant to be simple.
angular-cli on the other hand actively incorporates best practices, latest technologies like Webpack 2 Beta and tries to give developers a piece of software to quickly scaffold and develop scalable production apps without worrying about build-tools and configuration.
QuickStart
This is not the perfect arrangement for your application. It is not designed for production. It exists primarily to get you started quickly with learning and prototyping in Angular
angular/quickstart/README.md
angular-cli
The Angular2 CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!
https://cli.angular.io
See also: https://angular.io/styleguide
I don't understand why the generator-ionic (along with other ionic + Yeoman project)s are so popular.
I don't see what the advantages are in using a yeomen generator in this case, this is.
I understand why the Ionic framework is useful in a Cordova project (as we all know, the UI, ngCordova plugins, it uses AngularJS, ect) but what specifically does the Yeoman component add that a basic Ionic project doesn't already have or that cannot be easily added with a bower install.
It seems to me that the Yeoman ionic projects just seem to be unnecessary bloat and can lead to more errors and library issues. I just do not see how components like karma and grunt (as opposed to ionic using gulp) fit into help with development.
True, you can set all this up by yourself. However, imagine setting this up on each and every project that you start. Kind of cumbersome, don't you think?
That's why some people tend to create these generators - to save you (if you like) the time of having to scaffold your application every time from beginning. Usually they provide some features (about which you can read on the Github pages) or they may even enforce some kind of project directory layout (which may help with big projects).
All in all, you don't have to use them, or stress about them. For instance, I personally don't use them on every project, but I appreciate the community effort and when I want to try something quick I tend to test them from time to time to see how they've evolved.
Don't hate, donate ;) (Sure sure, I know you're not hating, the statement just seemed appropriate).
After having been convinced to learn and use Angular.js, I was going to start a concrete web UI application so as to launch the learning wheel of experience. ( The app is going to be some kind of personal planning, to do list, reminder, pomodoro technique oriented, and so on...)
One of the tutorial videos I have seen, by the author of Angular, is about best practices. And one of the best practices is to start with the angular-seed project.
That is what I was going to do, but after googling a little, there are already at least two other projects that claim to be the good starting point:
angular-enterprise-seed
angular-sprout
I'm beginner, but I like to invest in the long term. Should I worry about using something else than angular-seed ? I feel like it's too early to ask myself this question, but if there are already two other projects, maybe there are some good reasons.
I've found that though many people use various seed projects, the easiest & most consistent starting point for an angular app (or any javascript web app) is Yeoman.
This app is a scaffolding tool that allows you to specify generators which will build the up the kernel of your application, complete with whatever libraries you desire (via bower) and a working grunt build file (most generators come stock with a build task, server task for live editing, and testing task)
Though an app like this is necessarily opinionated, the scaffolding it produces is still very generic.
example:
mkdir my-app
cd my-app
npm install generator-angular
npm install generator-karma
yo angular
They all have different merits so it depends on what you are looking to do. I wrote angular-enterprise-seed and can speak to its relative merits.
It is server-agnostic. This is important since a core tenet of AngularJS, and one of many things that make it attractive, is that it follows the Client MVC paradigm. This means it is entirely decoupled from any and all server technologies. Many existing seeds tie AngularJS to server technologies, such as angular-sprout (NodeJS) or grilled-feta (Google App Engine/Java). In the case of the aforementioned projects, if NodeJS and/or Java environments aren't already on your system, then you will have to go through several hoops just to see the seed come up. This can be alienating to PHP and Python developers, which results in limiting the project's community.
Up and running in seconds. Because it is server-agnostic, it can be run in any container (heck the filesystem for that matter). Suggested method is running "python -m SimpleHTTPServer" from the root directory -- this comes native on Mac and Linux so there are no additional steps.
Live preview. It's cheap to check on status of the project because a live version is always hosted on github. Because it's server agnostic, this is automatically done by copying master to the gh-pages branch from a cron job.
Rich styling. It includes Twitter Bootstrap and custom/buildable LESS out of the box, along with Angular-UI, Angular-NG, fonts, and a myriad of other tools to provide rich styling and responsiveness capabilities.
Widgets. Like Angular-Seed and Angular-Sprout, Angular-Enterprise-Seed exemplifies "best practice" layout, routing, etc. But it also provides a host of pre-built components that can be taken off the shelf and immediately reused. This is a bit difficult to do as it can require the convergence of several technologies. For example, to create the grid example, I combined angular-ui, angular-ng, angular-js, and jquery styling. There are component examples for modals, pagination, alerts, grids, and more.
Angular-seed is great as an academic exercise if you want to learn how the pieces work, but it will leave you longing for a more substantial jump-off point.
I haven't used angular-sprout so I can't speak to its merits. Maybe there is some room to merge angular-sprout and angular-enterprise-seed?
I recognize that this is an older question, but it seems to have a fair number of views, so it makes sense to recommend what has recently become a very popular alternative to both Yeoman and angular-seed: ng-boilerplate. ng-boilerplate differs from angular-seed in that it's designed from the ground up for large production web apps, and therefore is a better solution than angular-seed in my opinion.
To explain the differences between the Yeoman and ng-boilerplate methods of app kickstarting, I'll quote ngbp's creator, Josh D. Miller:
Yeoman is awesome. But the problem I have with the generators for AngularJS is that they package by layer rather than by feature. If we store all controllers in a "controllers" folder and all services in a "services" folder, etc., and all our tests someplace else entirely, it can be quite challenging to reuse our components.
This is also pretty good discussion by Josh on the Yeoman angular-generator issues forum, that goes more in depth regarding the setup of ng-boilerplate vs. yeoman.
Just to be clear, Yeoman is not a generator. Yeoman is a format/system for making generators. There are several generators made with Yeoman that you can use to generate an AngularJS application. People often mistakenly refer to one or another of them as "the" Yeoman generator. But there are many. Confused yet? Yeoman isn't the only generator making system. Brunch is another one.
To answer your question, here is a very comprehensive side-by-side comparison of many AngularJS generators one can use to start making a web application with AngularJS. Currently, it contains over 200 different aspects of these things. One of them is file organization style. So you can easily see which ones organize the files by feature if that's important to you. It is to me.
There are still several of these left to be added. The two mentioned in this thread are new to me. But this comparison should give you a good idea of the options and how they compare. It's editable too, so if any of you are experts in any of these things, feel free to share what you know.
God only knows why people keep making more and more of these things instead of just helping to improve the existing ones. If you have any guesses, I would love to have that mystery solved.
EDIT: to gain access to the doc I ask that you either complete a questionnaire to share your knowledge of something or lobby the experts to do so.
Go here to do a questionnaire:
http://www.dancancro.com/technology-questionnaires/
I like using Yeoman as well. Try these to get a good scaffold:
npm install -g generator-angular # install generator
yo angular # scaffold out a AngularJS project
bower install angular-ui # install a dependency for your project from Bower
grunt test # test your app
grunt server # preview your app
grunt # build the application for deployment
I've recently built a demo application using PhoneGap, and I chose to try JQuery Mobile as a UI framework. It was... okay. I'd like to try out Sencha Touch now and see if I like it better.
As of now (mid-December '11), it appears that Sencha Touch 2 has been released as a preview, and has significant improvements in performance (which is a key ingredient for me). However, it's missing some features, and doesn't seem to have many demos / tutorials yet on the Sencha website.
In the valuable opinion of SO's seasoned Sencha Touch developers (and by seasoned, at least in the mobile realm, I mean that you've at least played with it for a week or so), would you recommend I start with Sencha Touch 2 from the get-go, or go through the motions of learning 1.x and just upgrading to 2 later on? What are the advantages / disadvantages of using "preview" versions of this and other frameworks, particularly when working within the ever-shifting world of mobile development?
Thanks for any input!
I created a few proof of concepts for my company in jQuery Mobile. While I personally love jQuery, jQM was not ready for a production environment if you wanted a slick, responsive, bug-free user interface. That was in the v1.0RC3 days. It is a stable release at the moment but I still feel the same way, hopefully future versions will address the shortcomings. I made this decision after running a number of benchmarks, a focus group and a pilot program(6 ppl). All said and done, I decided to evaluate ST.
Sencha Touch has the best UI, IMO. However, there is a strong learning curve with this framework. API documentation is complete and while there are tutorials lurking here and there, there is NOTHING that spells out the ST framework from start to finish. I often find myself searching in the depths for a brief glimpse of an explanation with no resolve. I find it frustrating that the Sencha team hasn't addressed this. I hear a lot about brushing up on EXTjs first as that is the placenta of ST's birth. (yes, I just said that) Truth is, if one has to learn another framework to utilize the one you are interested in, just to understand how it works, its a major fail. I'm not learning EXTjs just for ST...
For Sencha Touch, you should be versed in MVC, object oriented programming, debugging web technology and have a solid understanding of JavaScript.
Now the real question is 1.x or 2.x. Situations like this are highly debatable. Resource and cost analysis should be done on both versions to show how your development time increases if you were to port 1.x code to 2.x and any other overhead associated with learning curves, etc. So instead of give you my biased opinion, I'll just tell you what I did for my company (7k + employees).
My project needed to be at a certain milestone by a certain date and I certainly can't deploy something that isn't in production status. Simply meaning I cannot use a beta for anything substantial. As ST2.x is in the PR3 stage, it isn't ready for production. Not to mention a lot of key features of ST are currently missing from the ST 2.x release, though will be added in future releases as they progress to production stable.
I developed my app in 1.x because it was stable, has numerous examples and documentation available so I could produce an app TODAY. If I started in ST2, I wouldn't be able to finish the app. The API is not frozen, lacking full documentation, sparse examples, limited community resources and missing features. I can't wait for ST2(going to be great!) but can't risk my project over it.
Bottom line... if you need an app today, go with ST1, if you can hold off for another few months and have the time to make updates to your app as the ST2 API is frozen and features are added back in, then I would go that route. Cheers.
I would suggest learning Sencha Touch 2. I wasted a lot time working with Sencha Touch 1. Just before giving up - decided to try Sencha 2 - devel release 4. Much much easier to work with and learn.
Good luck
JRS
Ext JS is a nice framework for web UI, but I found that building and putting stuff together takes a long time and painfully slow.
This might be a general problem when working with JavaScript, but does anybody have any way to speed things up?
What can I use? Better IDE with good JavaScript suppport? GUI designers? Code generators?
I need some way to speed up common things like building grids and forms but yet let me do complex things like creating custom components easily.
I'm using ASP.NET MVC. Coolite seems nice at first, but I feel that I'll be having trouble when creating any custom components later on.
There's always Ext GWT, which lets you use Eclipse tooling (and all of the advantages that gives you, such as refactoring, swift code navigation, etc.) to create your Ext/JavaScript app.
When you download the ExtJs library, you find lot of sample applications for common requirements like Grid panel, forms, form elements etc.
Regarding IDEs, you dont find mature productive tools, but check the below link and wish it could be of help to you
http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/
But if you really wish to develop custom components, you need to get through knowledge,start approaching with ExtJs-provided sample apps.
If you want to get faster at anything, practice it until you fully understand how it works and how to make it do what you want. If you are just starting out, why would expect to be able to work as quickly as you do when you are working on something that you are very familiar with?
Things I use to make ExtJS less painful
Chrome, for it's developer tools, or Firefox with Firebug.
snipMate: snippets for Vim, so I can quickly produce boiler plate code for classes.
JSLint as a command line tool. Especially good for detecting rogue commas.
Sencha forums.
ExtJS IRC chat (Server: irc.freenode.net Room: #extjs).
API documentation.
Sencha and Saki's ExtJS examples.
Beer.
ExtJS is building a designer right know so you can look forward it, the only problem I think is not gonna be free.
you can see a video demo there, in term of release date I think this is due to the first quarter of this year.
I say learn the framework. But to develop apps, I use IntelliJ IDEA, which has partial code completion, etc. It costs money though.
Once you have some practice and understanding of how ExtJS works, you'll get faster at it. By using the examples for reference, and building up my application in small pieces, I've gotten much better (and faster) at developing stuff with ExtJS. A great way to get started is to find an example (or two) that kind of do what you need, and modify (or combine) them to see how they work together.