더 큰 JavaScript 애플리케이션 개발을위한 모범 사례
Java / C ++에 대한 강력한 배경 지식을 가지고 있기 때문에 품질을 낮추지 않고도 더 큰 JavaScript 애플리케이션을 개발할 수 있는지 궁금합니다.
다음에 관한 힌트를 보내 주시면 감사하겠습니다.
- 개발 환경
- 디버깅 기법
- 단위 테스트
- 프로파일 링
- 수단
- 시스템 디자인
- 인터페이스 디자인
- 코드 디자인
또한 JavaScript PC 에뮬레이터 및 JavaScript 게임 엔진 과 같은 프로젝트 가 여러분 중 일부가 알고있는 경우 이러한 문제를 어떻게 처리했는지 궁금합니다 .
개발 환경 AJAX 통신을 시뮬레이션하려면 Apache 또는 IIS와 같은 웹 서버 (서버 측 아키텍처에 따라 다름)가 필요합니다. 때로는 자바 스크립트 용 편집기가 서버 측 개발 언어의 편집기에 포함되어 있습니다.
자바 스크립트 IDE에 대한 흥미로운 질문이 있습니다 : https://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support
디버깅 기술 및 프로파일 링 Firebug 와 같은 내장 브라우저 디버깅 및 프로파일 링 도구를 사용 합니다.
이 프로파일 링 도구를 볼 수도 있습니다 .
단위 테스트 jQuery를 사용하는 경우 http://docs.jquery.com/Qunit을 권장 합니다. javascrit 애플리케이션의 개발 버전에서 javascript 테스트 파일이로드됩니다. 애플리케이션이 게시 될 때 테스트 파일은로드되지 않습니다.
보안
- 서버 측 에서 모든 것을 검증하고 계산 합니다.
- XXS 방지
디자인
신청--------------------------------
- 애플리케이션 구성 요소
- 커스텀 위젯
뼈대----------------------------------
- 기본 위젯
- 기본 AJAX 통신
- UI 코어 (도우미 방법 ...)
프레임 워크는 기본 기능을 제공합니다. 예를 들어 기본 프레임 워크는 jQuery 및 knockoutjs 입니다. 그리고이 프레임 워크 위에 애플리케이션이 구축됩니다. 물론 애플리케이션을위한 고유 한 프레임 워크를 만들 수 있습니다. 하지만 예를 들어 jQuery를 선택할 때 브라우저 간 버그를 처리 할 필요가 없습니다.
서버와의 통신 : 통신을 위한 RESTful 서비스 를 제공하는 것이 좋습니다 . 또한 JSON과 XML 중에서 선택해야합니다. JSON은 XML보다 가볍기 때문에 종종 JSON이 선택됩니다.
디자인 패턴 : 자바 스크립트 애플리케이션이 정말 큰 경우 MVC 또는 MVVM과 같은 디자인 패턴을 구현하는 것이 좋습니다.
자바 스크립트 용 외부에 MVC / MVVM 프레임 워크가 있습니다 ( 예 : knockoutjs ).
이것은 자바 스크립트의 디자인 패턴에 대한 정말 유용한 기사입니다 : http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
그러나 결국에는 애플리케이션의 구조 등을 스스로 결정해야합니다. 디자인 패턴은 좋은 방법을 보여줄 수 있습니다. 그러나 모든 애플리케이션은 다르며 모든 솔루션이 모든 문제에 대해 작동하는 것은 아닙니다.
그리고 자바 스크립트를 사용할 때 성능이 중요하다는 것을 잊지 마십시오. 따라서 자바 스크립트 파일을 압축하고 결합하는 것이 좋습니다. http://code.google.com/intl/de/speed/articles/ . 이 시점에서 Lazy Loading도 도움 이 될 수 있습니다.
저는 SproutCore 와 Cappuccino 를 모두 사용 하고 "Macroframework"없이 대규모 JavaScript 애플리케이션을 작성하는 데 참여했습니다 . 이것이 내가 생각하는 것입니다.
우선, Java 작업에서 얻은 동일한 "좋은 디자인"원칙이 여전히 적용됩니다. Spaghetti 코드를 작성하지 말고, 캡슐화하고, 우려 사항을 분리하고, MVC를 사용하십시오.
많은 사람들이 "웹 2.0"또는 "웹 3.0"(그것이 무엇을 의미하든간에) 앱을 작성하기 시작합니다. jQuery를 추가하고 코드가 점점 커지고 완전히 유지 관리 할 수 없게됨에 따라 고통과 불행의 길을 따라갑니다.
Cappuccino 또는 SproutCore와 같은 "큰"프레임 워크는이를 방지하는 데 도움이됩니다. Cappuccino는 데스크톱 스타일 앱에 적합하며 SproutCore는 2.0에서 New Twitter와 같은 "웹 스타일"앱으로 초점을 이동하면서 앱과 코드를 구성하는 훌륭한 방법을 제공합니다.
이제 귀하의 특정 영역 또는 관심사에 대해 알아보십시오.
개발 환경
저는 개인적으로 MacVim을 사용합니다. JS 개발을위한 브라우저 내 IDE 인 Cloud9IDE에 대해 좋은 소식을 들었습니다 . Cappuccino의 경우 Apple의 Xcode IDE를 사용하여 UI를 디자인 할 수도 있습니다 (매우 멋지다).
Cappuccino 및 SproutCore 앱은 웹 서버 없이도 브라우저에서 바로 테스트 할 수 있습니다. 웹 서버와 통신해야하는 경우 (아마도 가능할 것입니다) Ruby on Rails 또는 node.js 는 일반적으로 쉽게 백엔드를 가동하고 실행하는 데 사용됩니다.
디버깅 기법
디버깅은 자바 스크립트 개발과 관련하여 여전히 끔찍한 부분입니다. Google 크롬 개발자 도구는 순간이 최선을 수 있습니다. 브라우저와 모든 종류의 깔끔한 작업에서 중단 점을 바로 설정할 수 있습니다. 사용하고 싶은 도구입니다.
단위 테스트
SproutCore는 QUnit을 사용하고, Cappuccino는 OJUnit / OJSpec과 함께 제공됩니다. 다음과 같은 프로젝트가 JSDOM 및 env.js 서버에 브라우저를 시뮬레이션하고 당신에게 브라우저없이 자동화 된 테스트를 실행할 수있는 환경을 제공 할 수 있습니다.
또한 Selenium 또는 Jasmine 과 같은 프로젝트 는 확인해 볼 가치가 있습니다.
프로파일 링 / 계측
Chrome 개발자 도구로 프로파일 링을 할 수 있습니다 . YSlow 는 일반적인 웹 애플리케이션 프로파일 링 (자산로드 등 포함)에 적합합니다.
시스템 디자인
처음부터 MVC를 사용하십시오. 많은 사람들이 작은 앱으로 시작하여 여기에 JavaScript를 추가하여 필드에서 값을 읽고 더 많은 JavaScript를 레이블을 업데이트합니다. 그들은 다시 그렇게합니다. 다시 한번. 저녁 식사가 제공됩니다 : 스파게티 코드. 이를 방지하고 코드를 구조화하려면 SproutCore 또는 backbone.js 와 같은 프레임 워크를 사용하십시오 .
이것은 SproutCore를위한 훌륭한 튜토리얼이고 , 이것은 backbone.js를위한 것 입니다.
카푸치노도 마찬가지입니다. 여기에 제가 약 1 년 전에 작성한 튜토리얼이 있습니다. 약간 날짜가 있지만 일반적인 아이디어를 제공합니다. 다음은 제가 지난 5 월에 MacTech 매거진에 쓴 기사에 대해 작성한 최신 데모 앱 입니다.
따라서 다른 개발 환경 에서처럼 코드를 구조화하십시오. 어쩌면 읽기 이 책 이나 이 책을 너무. 이 비디오는 또한 훌륭한 리소스 입니다.
인터페이스 디자인
Cappuccino의 경우 Apple의 Xcode Interface Builder를 사용하여 UI를 그래픽으로 레이아웃 할 수 있습니다. 대부분의 다른 시스템에서는 표준 HTML 및 CSS로 UI를 디자인합니다.
모바일 용으로 개발 하려면이 기사를 읽어야합니다 .
코드 디자인
위에서 언급 한 책과 비디오를 참조하십시오. 그리고이 일반적인 코딩 스타일을 참조하십시오 . 당연히 사람들은 그 페이지에 배치 된 스타일의 일부 측면에 동의하지 않지만 좋은 출발점입니다.
JavaScript는 개발하기에 흥미로운 환경이며 매우 활발한 커뮤니티가 있습니다! 재미에 동참해야합니다! 제 의견이 도움이 되었기를 바랍니다.
도구 정보 :
- JSLint 는 http://www.jslint.com/ 에서 Douglas Crockford가 개발 한 온라인 도구입니다 . 가능성이 희박하더라도 코드가 깨질 수있는 이유를 알려줍니다.
- JSMin 은 C로 작성된 단일 파일 자바 스크립트 축소 기입니다. 컴파일하고 $ PATH에 넣고이를 사용하여 앱의 빌드 스크립트를 만듭니다. 축소 된 자바 스크립트는로드 속도가 빠른 것으로 간주됩니다. http://www.crockford.com/javascript/jsmin.html 에서 다운로드하십시오 .
- JS Read-Eval-Print 루프를 갖는 것은 항상 편리합니다. 가장 많이 다운로드 된 것은 node.js , Chrome 자바 스크립트 엔진 인 V8을 기반으로 한 REPL입니다. 자바 스크립트 스 니펫을 대화식으로 테스트 할 수 있습니다. 또한 재치있는 이벤트 루프 시스템을 통해 가장 강력한 웹 서버 중 하나로 작동합니다. 이런 식으로 사용하는 것이 좋습니다!
- JS 프롬프트는 좋지만 뛰어난 Web Inspector 가 필요합니다 . 이는 관대 한 디버깅과 더 나은 코드 이해를 제공합니다. 이 분야에서 Google 크롬과 Firebug는 모두 최고 수준으로 간주됩니다. 차이점은 Google 크롬이 내장되어 있다는 것입니다. 마우스 오른쪽 버튼으로 클릭> 검사하면 완료됩니다.
그러나 최고의 기능 은이 화려한 치트 시트 에서만 찾을 수 있습니다 . - JSFiddle is an online tool to try out snippets too.
- @mathias is quite proud to maintain jsPerf, a collection of items which test JS snippets and can tell, cross-browser, which algorithm is fastest.
- YSlow is another really accurate tool to tell you if your website is fast, and how you can improve it, with witty advice.
As far as IDEs are concerned, there is no single development environment that is proved more effective. The best people in the field only use the text editor they fancy most (@phoboslab, the man behind ImpactJS, uses KomodoEdit, for instance. Paul Irish uses TextMate, which is good, but Mac-only. A lot of people use Vim. Fabrice Bellard, the guy behind JSLinux, uses his own Emacs version, I think. This does not matter a single bit).
Unit testing is important, but that is never an issue. Javascript is powerful enough that you can build yourself a better-suited unit testing software in a couple of lines than anything out there. What does matter is that, thanks to node.js (the JS prompt that I recommend above), you can automate those tests by putting them in a *.js script file and launch all the testing with the single line: $ node test.js.
What really counts to be effective is to have the mdn javascript documentation under your pillow, and the html specification always open. Mind you, the version I point you to is not widely known, but it is by far the best out there! It even uses the cache manifest so that you can re-read the pages you have already downloaded, when you're offline! Let alone an outstanding search feature!
And now, since I really want that bounty, I'll give you one nifty page that lists all the documentation that you will ever need to build a web app. It really is a jewel. It contains a link to all information you need. That is the index of all bibles out there.
In the end, the question that really targets what you are wondering is, can you do a huge app in javascript?
The answer is yes. Javascript does have what Crockford calls "bad parts", but using JSLint warns you against them. On the other hand, Javascript has powerful weapons:
- Closures: you can define a function inside another function, and it will have access to ouside variables, even after the outer function is done running.
- First-class functions: you can create arrays of functions, pass in functions as parameters to other functions, return a function from another function, all this for free!
- Object literals, array literals: this is the basis of JSON. It is very easy to use. All javascript engines now have a
JSON.parse(aString)and aJSON.stringify(anObject)built-in object. - Prototyping: objects can inherit from any variable you have previously defined.
This makes working efficient and easy. There are some specific patterns that you can use in Javascript. I'll let Paul Irish enlighten you.
One last advice, when using javascript in the browser: never use <script>/* some javascript here */</script>. Always use <script src="javascript-file.js"></script>.
And a couple more links.
- http://my.opera.com/emoller/blog/2011/05/01/javascript-performance or how to not fear implementing ZIP in the browser.
- http://paperjs.org/features/ about how far we can go now. Editing precompiled javascript on the go!
- http://brendaneich.com/2011/05/mozillas-nodeconf-presentation/ about the future of javascript.
You can check out Google's Closure library and compiler. They write some pretty large Javascript apps too.
You should look into alternatives to JavaScript that still allow you to deploy in a JavaScript like environment.
A lot of writing large apps is having a tool chain that make it easy for individuals and teams to get code working together without having to have everyone communicate with everyone else, an O(n**2) problem.
Things like GWT allow you to write in Java so if you have a team that is capable of coordinating development in Java or another statically typed application development language, they might find the transition to GWT much easier than to JavaScript. GWT also provides solid core libraries, templating, in-java-IDE debugging, minimized code per-browser, and a whole lot of other goodies.
GWT also works with java unit testing facilities, namely junit and many java teams are already experienced with integrating junit into continuous build systems and test dashboards.
Note that this post is more web focused, as that is where I primarily work
Development Environment
If you prefer IDEs, JetBrains has a really good web editor WebStorm that makes working in javascript a lot easier. Aptana is another good option. Otherwise text editors are always a great option (TextMate is my preference).
Debugging Techniques
Mentioned above, browser DOM tinkering tools like firebug are a must. You need to be able to declare and evaluate your code in the environment where it is being used without having to save and reload constantly.
Another point to mention here is jslint, which is strict validation of your javascript. This is equivalent to compiler time errors and can be invaluable when fixing issues in javascript.
Unit Testing
The best unit testing framework for javascript is jasmine (based off of rspec style tests). Some people do not like BDD style declarations, though most people that use TDD accept BDD is just TDD done right. Personally, I find the BDD style helps focus people towards what they are trying to test. It has extensive assertion support and a lot of work has been done to handle the asynchronous nature of javascript, without getting too dirty.
Profiling/Instrumentation
Most browsers have integrated development support. Both firefox and chrome are great here. Though the tooling doesn't provide great detail, they can easily be used to recognize that a slow point is in your server or in your client side code. With that information, deeper analysis would be needed, but it should be just work to track down and fix the issue.
This is definitely a space that is going to see a lot of growth outside of browsers with the growing popularity of nodejs.
Design (System/Code/Interface)
Any major javascript application is going to run into all of the issues that any dynamically typed language will. Furthermore, javascript also has a very long history in which a lot of bad code was and is written everyday. Javascript does nothing to push you into the pit of success, hence books like, "Javascript, the good parts".
On the other hand, javascript has great support for OOP, as well as functional programming (functions are first class citizens in the language). Object literals are a beautiful combination of objects in the class sense and dictionaries in the structure sense. On top of this, there are some truly unique features too the language and they can allow you to accomplish many powerful things.
With these considerations, you can apply any patterns you would use in other languages. There are numerous frameworks that take advantage of this. There is a great article that goes through many of the common frameworks for dependency management, code organization, templating, module communication, build process (including minification) and finally testing.
Building Large-Scale jQuery Applications
It's still possible to use Java like tools when developing with JS. The company that I work for has a 500K+ loc application, and we employ tools like Maven to deal with library dependencies. We also use Eclipse for JS development using the WTP plugin.
We use JS Test Driver for UnitTests and selenium for ATs. For degugging and profiling, we generally use Firebug and the IE debugger built into VS Web Express.
For code compilation, we use Google closure and a Java Servlet for serving JS during the development process, which is able to load the each JS file and it's dependencies in an order that ensures that class dependencies are available.
Majority of your questions has already been answered, however, I'm very surprised that nobody mentioned DynaTrace Ajax as profiling tool, since it's by far the best tool available on the market right now for in-browser JavaScript application profiling.
For debugging, you will have to rely on build-in browser debuggers (developer tools in Chrome/Safari, Developer toolbar in IE, Firebug in Firefox), but the most powerful debugging tool is still IE + Visual Studio, though not very comfortable at times.
This article may help in understanding The Strategy Pattern in JavaScript
'Development Tip' 카테고리의 다른 글
| Spring-동일한 애플리케이션에서 여러 트랜잭션 관리자를 사용할 수 있습니까? (0) | 2020.12.01 |
|---|---|
| html5 : 머리글 또는 바닥 글 태그를 두 번 사용합니까? (0) | 2020.12.01 |
| 흐림 이벤트가 클릭 이벤트 작동을 중지합니까? (0) | 2020.12.01 |
| 벡터를 정의하기 위해 c ()를 사용하는 이유는 무엇입니까? (0) | 2020.12.01 |
| Java의 ArrayList 또는 List 선언 (0) | 2020.12.01 |