I am new to apple and would like to learn to program web sites in mac. I am interested in learning Backbone/Knockout js. Is there any write up available that I can use to kick start my learning experience? All my development on the two technologies were using Windows ASP.Net under IIS. What are the things I need to setup a simple development environment to learn and test above mentioned technologies in Mac?
(Your question is pretty broad, and I'm assuming that you know relatively little about JavaScript and are just looking to start writing JavaScript applications on your Mac. Note that this is not going to be much different from writing them on a Windows machine, but I have little experience with developing web applications on Windows machines. Hopefully my answer is within the scope of your question.)
For JavaScript development, all you need is a text editor and some sort of JavaScript engine. As far as text editors go, TextMate is the most popular Mac app of that sort (although it requires a license). You could also use the built-in TextEdit app (although it's horrible IMO), a command-line text editor (such as Vi or Vim), or a different editor such as Sublime Text. But in a nutshell: JavaScript does not require any specific IDE or anything like that. Use whatever you like.
As far as a JavaScript engine goes, since you're looking to do web design, you really just need a web browser. The major browsers for Mac (Chrome, Safari, and Firefox) all have advanced web design tools (the built-in inspectors in Chrome and Safari, and the Firebug add-on for Firefox) that will allow you to see the JavaScript console, network requests, etc. You can even fire those up and write JavaScript statements directly into them. You should explore those sooner rather than later, as they'll prove immensely valuable.
I can add Jetbrains WebStorm with awesome javascript/coffeescript intellisense. And node.js as server.
Related
I'm making a game with HTML/CSS/Javascript because it's the code I'm most comfortable with at the moment. I'm only really doing this as an exercise in game development and plan to learn C# later. But for now that's what I'm using, and I have a question about it.
Obviously when making a website, you want your website to be compatible with all web browsers equally. Right now, I'm using Chrome to test/debug my game, and I've decided to develop this game with Chrome in mind. But not everybody has Chrome, and not everyone would want to download it in order to play my game.
Is there a way to run an HTML/CSS/Javascript file in a Google Chrome "environment" without having the actual browser installed? Just it's code engine and none of the rest of the browser.
I've been reading about their V8 Javascript engine that they use in Chrome, and am wondering if that is part of the answer I'm looking for. What I'd like to do is include this "engine" in an installer with my game files and have it install like any other game.
Hopefully this makes sense. This may not be possible/exist, but if someone knows something I don't or an point me in the right direction, that'd be amazing. Thanks!
You could look into Node-webkit which essentially allows you to write desktop applications in html/css/js. When you distribute your game along with your node webkit executable, it is always run in the same environment. You can see some cool examples on their demos and examples page.
Usually a common path to convert web application to native desktop applications is to use a "thin" browser as app container and ship it.
A lot of current applications out there are using this trick (Spotify, Slack, etc...) and it works pretty well.
I've read of some people using the CocoonJS game engine framework and successfully ship it with this techniques.
To most famous wrappers, that I know are node-webkit or electron (AKA atom-shell).
Once you include your game in either one of those you can just "compile" it (it is not a real compile, but just to give you an idea) and ship it: with some tricks it is also possible to publish it in the Mac/Win app stores.
In case you want to focus on mobile instead, there are similar frameworks but I don't really know which are the most common.
Note: if you're using fancy WebGL or very advanced stuff these tools may have some issues sometimes.
So essentially you want to install the JS engine to use it with any browser? In this case, the answer is: nope. Browsers act different, they don't have a standard interface, nor have this "swapping" capability in mind.
In case you'd be asking for an embedded browser inside an app... well, isn't that worse than installing Chrome? You may embed webkit/V8, but it's a hard way and you'd know programming.
So simple answer is: you'd make it compatible for at least the evergreen browsers (Chrome / Firefox mainly). Or reduce your target to webkit based only browsers (or in your case V8, i.e. Chrome, Chromium and the forks).
If you want that your game is only for chrome, because you read V8 documentation, you can create it as an extension. There'sn't other way to install your JS, because browser interpret javascript, not compile it. And the docs you need is found at: https://developer.chrome.com/extensions/getstarted
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
First, I'm not interested in doing this professionally. I am a web developer, a coworker of mine recently left for Spotify and said he will be working mostly in JavaScript for the Spotify Desktop app. He said it uses "Chrome frame" and everything inside is done like a web app (HTML/JS/CSS).
As a web developer who never built anything for Desktop, this is great news. If I can use the technologies I already know and implement them inside some sort of a "frame" and still be able to build a windows or better yet cross platform app.
I know I didn't mention anything about the database, but even a simple hello world desktop app with web technologies would be great to get going.
So how does one go about this? Exactly what do I need/need to know?
You may start with Titanium for desktop dev. Also you may have a look at Chromium Embedded Framework. It's basically a web browser control based on chromium.
It's written in C++ so you can do all the low level OS stuff you want(Growl, tray icons, local file access, com ports, etc) in your container app, and then all the application logic and gui in html/javascript. It allows you to intercept any http request to either serve local resources or perform some custom action. For example, a request to http://localapp.com/SetTrayIconState?state=active could be intercepted by the container and then call the C++ function to update the tray icon.
It also allows you to create functions that can be called directly from JavaScript.
It's very difficult to debug JavaScript directly in CEF. There's no support for anything like Firebug.
You may also try AppJS.com (Helps to build Desktop Applications. for Linux, Windows and Mac using HTML, CSS and JavaScript)
Also, as pointed out by #Clint, the team at brackets.io (Adobe) created an awesome shell using Chromium Embedded Framework that makes it much easier to get started. It is called the brackets shell: github.com/adobe/brackets-shell Find out more about it here: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
NW.js
(Previously known as node-webkit)
I would suggest NW.js if you are familiar with Node or experienced with JavaScript.
NW.js is an app runtime based on Chromium and node.js.
Features
Apps written in modern HTML5, CSS3, JS and WebGL
Complete support for Node.js APIs and all its third party modules.
Good performance: Node and WebKit run in the same thread: Function calls are made straightforward; objects are in the same heap and can just reference each other
Easy to package and distribute apps
Available on Linux, Mac OS X and Windows
You can find the NW.js repo here, and a good introduction to NW.js here. If you fancy learning Node.js I would recommend this SO post with a lot of good links.
Awesomium makes it easy to use HTML UI in your C++ or .NET app
Update
My previous answer is now outdated. These days you would be crazy not to look into using Electron for this. Many popular desktop apps have been developed on top of it.
NOTE: AppJS is deprecated and not recommended anymore.
Take a look at NW.js instead.
It seems the solutions for HTML/JS/CSS desktop apps are in no short supply.
One solution I have just come across is TideSDK: http://www.tidesdk.org/, which seems very promising, looking at the documentation.
You can develop with Python, PHP or Ruby, and package it for Mac, Windows or Linux.
Sorry to burst your bubble but Spotify desktop client is just a Webkit-based browser. Of course it exposes specific additional functionality, but it's only able to run JS and render HTML/CSS because it has a JS engine as well as a Chromium rendering engine. This does not help you with coding a client-side web-app and deploying to multiple platforms.
What you're looking for is similar to Sencha Touch - a framework that allows for HTML5 apps to be natively deployed to iOS, Android and Blackberry devices. It basically acts as an intermediary between certain API calls and device-specific functionality available.
I have no experience with appcelerator, bit it appears to be doing exactly that - and get very favourable reviews online. You should give it a go (unless you wanted to go back to 1999 and roll with MS HTA ;)
I know for there's Fluid and Prism (there are others, that's the one I used to use) that let you load a website into what looks like a standalone app.
In Chrome, you can create desktop shortcuts for websites. (you do that from within Chrome, you can't/shouldn't package that with your app) Chrome Frame is different:
Google Chrome Frame is a plug-in designed for Internet Explorer based
on the open-source Chromium project; it brings Google Chrome's open
web technologies to Internet Explorer.
You'd need to have some sort of wrapper like that for your webapp, and then the rest is the web technologies you're used to. You can use HTML5 local storage to store data while the app is offline. I think you might even be able to work with SQLite.
I don't know how you would go about accessing OS specific features, though. What I described above has the same limitations as any "regular" website. Hopefully this gives you some sort of guidance on where to start.
You can build Javascript apps with Adobe AIR… http://www.adobe.com/products/air.html
CEF offers lot of flexibility and options for customisation. But if the intent is to develop quickly node-webkit is also a good option. Node-web kit also offers ability to call node modules directly from DOM.
If there aren't any native modules to integrate Node-Webkit can offer better mileage. With native modules C/C++ or even C# it is better with CEF.
Whether you are forced to code javascript in Visual Studio 2010, or insist on using Visual Studio 2010 instead of another IDE, I'm wondering what anyone has done to improve the javascript development experience in VS2010.
I'm asking since javascript support is lacking in Visual Studio 2010. You don't get the the kind of support you get as if you were developing Silverlight apps in C# and XAML. For example, the intellisense doesn't support javascript 1.8.5 (or even 1.6 functions i.e. JSON.Parse), it's difficult to navigate to function or object definitions (no Go To Definition), no Object Browser, Call Hierarchy, and the list can go on.
What have you done to compensate for the VS2010 features that don't exist for javascript? Also, what would be a good feature request to support javascript development; anything that VS2010 should add as an extension or a future release? Also, are there any suggestions to manage the .js code for large projects?
A few things that have helped me so far are the JScript Editor Extensions, and the Web Standards Update. Also, when working in .js files I rely on bookmarks to get back to key places, since the functions of the file aren't visible (as the would be in C#). My feature request would be to add intellisense support by javascript version, similar to how you can target .NET 2.0, 3.5, or 4.0.
There are a number of VS extensions to assist with javascript:
Visual Studio Javascript extensions feature comparison
JSEnhancements is awesome, and does what you really want: adds regions and code block collapsing.
Also see this extension: http://code.google.com/p/js-addin/
which parses your script into an object tree that can be used for navigation.
I have also used the free version of this editor: http://www.yaldex.com/JSFactory_Pro.htm
I can't recommend it, unfortunately, because it suffers from a couple critical problems (awkward UI, freaky intellisense, and not entirely stable). Which is too bad because it's a very thoughtfully designed piece of software by and large, it just fails where the rubber meets the road.
1) Install Resharper, helps a lot when building javascript heavy web apps.
2) Get FireBug for debugging.
3) Also, the JQuery.vsdocs files are sometimes helpful!
While I use vim and Notepad++ to cut code, I feel your pain, or did until I started using Firebug to debug JavaScript. While it many not be exactly fitting for your situation it's invaluable to me in developing Web based apps:
http://getfirebug.com/
I've realized I need a full-fledged browser automation tool for testing user interactions with our JavaScript widget library. I was using qunit, starting with unit testing and then I unwisely started incorporating more and more functional tests. That was a bad idea: trying to simulate a lot of user actions with JavaScript. The timing issues have gotten out of control and have made the suite too brittle. Now I spend more time fixing the tests, then I do developing.
Is it possible to find a browser automation tool that works in:
Windows XP: IE6,7,8, FF3
OSX: Safari, FF3
?
I've looked into SeleniumIDE and RC, but there seems to be some IE8 problems.
I've also seen some things about Google's WebDriver, which confusingly seems to work with Selenium.
Our organziation has licenses for IBM's Rational Functional Tester, but I don' think that will work on the MAC.
The idea is to try to run tests on all the browsers our organization supports. Doable? Are my requirements unrealistic? Any recommendations as far as software to try?
Thanks!
I would recommend using Selenium but I say that as a Selenium Committer.
Selenium works on any browser that supports JavaScript since the framework has been written in JavaScript. This means if your browser on any OS supports JavaScript it will run in Selenium. That documentation it out of date, you can see that since it is talking about IE8b1 and IE9 preview is out now.
Selenium and WebDriver (which isn't a Google thing since it started at ThoughtWorks) are currently being merged as they both have their strengths and weaknesses. The current merged work will be called Selenium 2 and you can start using the alpha release now at http://code.google.com/p/selenium/. It will still work on any OS as that is still the main driving force behind the work being done.
Selenium IDE only works on Firefox because it is a Firefox add on.
I personally would avoid Rational Functional Tester because it has a lot of weaknesses that its not even worth contemplating.
If you start with Selenium there are some tutorials on my site at http://www.theautomatedtester.co.uk
Try Sahi (http://sahi.co.in/) It works across browsers and operating systems. It has a powerful recorder, and great APIs for object identification. It supports HTTPS, proxy tunneling etc. and has drivers in sahi script, java and ruby. It also has parallel playback inbuilt. It is 5 yr old mature project hosted on SourceForge, with releases almost every month.
It automatically waits for AJAX and page loads, and does not use XPaths for object identification. It also handles sites with dynamic ids.
Selenium is probably your best bet out of the tools you mentioned. What are the issues it has with IE8? You might want to check out HttpUnit to see if that meets your needs, also.
Selenium RC is a great tool if you invest the time to use it. With significant modifications to the existing library I've gotten it to fulfill all of my front end testing needs.
The confusion you are having about Webdriver is understandable. Selenium 2 is in development and will be a merge of Webdriver and Selenium. Check out: http://www.youtube.com/watch?v=RQD4EzWI4qk to get more detail.
The only browser that I have found to be unusable with Selenium is IE6. IE7 and IE8 work fine as does Firefox (which I have modified to include firebug for debugging purposes).
I'm in the same boat. It is a difficult problem to solve. Windmill and Selenium are the 2 best I've found. Though they both have issues. Selenium can only record scripts in Firefox and I haven't managed to get the proxy chaining to work as advertised. Windmill you can record in any browser and you can supposedly tweak the proxy to put extra logic in there, but the js mechanism for recording across page loads has been in my experience very brittle at least on the app I have to test.
I don't think anyone can get it quite right as long as there is more than one browser that needs to be supported.
Maybe have a look at SIKULI. It's a different paradigm but, depending on what you want to test exactly, it may do the job and will work with any browser, on any platform.
Have a look at their official blog for some examples of interactions with web applications.
So I wrote some of my more problematic tests in Selenium RC, using the Python driver. It was a better experience than writing the same tests in pure JavaScript, but I still had some of the same issues.
Testing something like an ajax autocomplete widget, meant forking some of the code depending on IE, or Firefox, and I still can't get typeKeys or a combination of type with typeKeys to work in Safari.
So, I am not sure if having cross browser clean, extensive ui tests is a bit unrealistic.
Should I try webdriver/Selenium 2? Would that make things better, or is that product not ready for prime time yet? How's the Python binding for that? I don't know Java, but I would learn some if need be.
I'm attempting to automate login into my small community bank, navigating through several links, and then downloading the .OFX.
I can't seem to find a good open source tool which is robust enough to handle this case. Automation frameworks like mechanize can't handle the Javascript.
I need this to be run in a graphic-less environment (via cron), so I don't think I can depend on tools such as watir which control standard browsers.
Any language is fine, although a scripting language is preferred.
Suggestions? Can I tap into the browser engines without displaying the browser?
Take a look at WWW::HtmlUnit. It is a Perl module that uses a Java library (included in the Perl module) that makes it easy to automate web pages, even those with JavaScript.
Use webdriver . The API page says you can toggle the visibility.
If webdriver doesn't fit you, you can use COM directly to automate Internet Explorer, you'd just have to read the documentation page on MSDN.
I'm not really sure how they will react to the graphic-less environment though.
Another option would be to use HtmlUnit, which can handle JavaScript, and emulates a browser, so you don't need to worry about interfacing with a real browser.
As for the scripting part, you can use groovy which compiles to bytecode. If you know Ruby, you'll have no trouble picking up groovy. Here's a link that will help PLEAC groovy
This may do what you want: Test Run: Web UI Automation with Windows PowerShell:
Dr. James McCaffrey - March 2008 Here
we show you how to use Windows
PowerShell to create quick and easy UI
test automation for ASP.NET and
classic ASP Web applications.