Kick ass code editing and end to end JavaScript debugging

•

4 recomendaciones•3,089 vistas

Cloud9 IDE is aiming to be the IDE for Javascript developers. We have all experienced the Eclipse variants and other Java or C++ IDE's for which webdevelopment and javascript was an afterthought. Extending these applications or customizing them to our needs was done in either Java or C++ and generally very difficult. We are developing applications in javascript to run online for a purpose, why shouldn't you do your application development online too? This talk gives an overview over the Cloud9 IDE and delves into the technical details of the code editor and the buildin debugger.

Tecnología

Kick ass code editing and
end to end JavaScript
debugging
Fabian Jakobs
@fjakobs

Overview

•Code Editor
• IDE Plugins
• Debugger

ACE
Ajax.org Code Editor

• nobody will use an IDE if the editor sucks
• should be able to replace TextMate

Requirements

• cross browser
• fully featured
• conﬁgurable
• scalable
• hackable

Sk y writer
Why not Bespin?

•inefﬁcient in full screen
• not cross browser jQ uer y
• dependency on Sproutcore

Implementation
Options

•Content Editable
• Canvas
• pure DOM

Content Editable

• not enough control
• cross browser issues
• not worth it (for code editing)

Canvas

• full rendering control
• no IE6, IE7, IE8
• implement key/mouse interaction manually

• O(number of pixels)

Pure DOM

• draw text, lines, rectangles
• implement key/mouse interaction manually

• naive O(number of lines)
• better O(number of visible lines)

DOM +
virtual view port
..
..
....
..
...
.... . . ...
.

• rendering a full document in ..
.
.
the DOM doesn‘t scale ..

..

• only render visible rows .
..
.. ..
.
.. . ..

..
.... . . .
.

Renderer

•DOM is used for drawing only
• no state in the DOM
• never read the DOM

Everything is a Plugin

search
ﬁle system code editor
new ﬁle
language modes save

debugger console

What is a plugin

• JavaScript for client code
• JavaScript (node.js) for server code
• XML to describe the UI

Debugging
V8 debugger protocol
over socket.io
IDE IDE
Server Client

V8 debugger protocol
over TCP
?

Application Application
(node) in Chrome

Open Source
Building Blocks
connect node.js
socket.io requireJS

ACE
jsDAV node-github
APF node-o3-xml async.js

Join us
in building an IDE
by JS devs for JS devs.

Thanks for watching!
Fork it on GitHub
http://github.com/ajaxorg/cloud9

Más contenido relacionado

Similar a Kick ass code editing and end to end JavaScript debugging

20120802 timisoara

Richard Rodger

Web technologies for desktop development @ berlinjs apps

Darko Kukovec

Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5

David Voyles

20120306 dublin js

Richard Rodger

ngGoBuilder and collaborative development between San Francisco and Tokyo

notolab

C++ on the Web: Run your big 3D game in the browser

Andre Weissflog

How to contribute textual tooling for apache camel in several id es

Aurélien Pupier

Micro servoces-choose-the-right-tools-programing-language

Youness Lasmak

Radu vunvulea building and testing windows 8 metro style applications using ...

Radu Vunvulea

Building Real-World Dojo Web Applications

Andrew Ferrier

Development with Qt for Windows CE

account inactive

NetWork - 15.10.2011 - Applied code generation in .NET

Dmytro Mindra

Phonegap for Engineers

Brian LeRoux

This talk is about creating Node.js interfaces for native libraries written in C or C++. It starts with various situations in which you need to build native addons and the common problems in doing that. I'll discuss the reference provided by the new N-API (Node-API) that helps mantainers to support a wide variety of Node.js releases without needing recompilation or abstraction layers. With all these tools and knowledge I'll show you how to build some addons from scratch and how to convert existing addons using the new N-API. The last part is related to future developments about addons.

Nodejs Native Add-Ons from zero to hero

Nicola Del Gobbo

Here, I am including the experience I had while exploring solutions for developing a mobile cross-platform library, i.e. a single codebase that could be part of mobile apps running under different platforms. It covers my journey from mobile cross-platform developments tools (PhoneGap, Titanium, and the likes), code porting tools, and WebViews that weren't up to the task, to C++ and JavaScript engines that did work. There aren't many resources out there explaining how to approach this problem, so we thought it could be helpful if we shared this experience.

Developing a mobile cross-platform library

Kostis Dadamis

DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits

Frédéric Harper

[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...

Sang Don Kim

A Lap Around Visual Studio 11

Chad Green

Auto cad 2006_api_overview

scdhruv5

Node.js Native AddOns from zero to hero - Nicola Del Gobbo - Codemotion Rome ...

Codemotion

Similar a Kick ass code editing and end to end JavaScript debugging (20)

20120802 timisoara

Web technologies for desktop development @ berlinjs apps

Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5

20120306 dublin js

ngGoBuilder and collaborative development between San Francisco and Tokyo

C++ on the Web: Run your big 3D game in the browser

How to contribute textual tooling for apache camel in several id es

Micro servoces-choose-the-right-tools-programing-language

Radu vunvulea building and testing windows 8 metro style applications using ...

Building Real-World Dojo Web Applications

Development with Qt for Windows CE

NetWork - 15.10.2011 - Applied code generation in .NET

Phonegap for Engineers

Nodejs Native Add-Ons from zero to hero

Developing a mobile cross-platform library

DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits

[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...

A Lap Around Visual Studio 11

Auto cad 2006_api_overview

Node.js Native AddOns from zero to hero - Nicola Del Gobbo - Codemotion Rome ...

Más de Fabian Jakobs

Amsterdam.js talk: node webkit

Fabian Jakobs

More and more sites allow code to be edited in the browser... anything from simple templates all the way up to complete applications integrating both client and server code. The most popular editor for this purpose is probably still <textarea>, which is a terrible code editor (just hit the tab key to see what I mean!) There's no excuse for just using <textarea> any more. The Ajax.org Cloud9 Editor (Ace) project was born out of Ajax.org's Cloud9 IDE cloud-based coding environment and Mozilla's Bespin/Skywriter project. With this project, we're creating an easily embeddable, "no compromises" editor. In our talk, we'll show off how you can: Use Ace in your own projects by adding just a couple of lines to your page Configure Ace to your tastes Extend Ace with custom features Along the way, you'll see a number of Ace's features that go beyond just syntax highlighting: live syntax checking, highlight uses of variables, easy keyboard navigation (even for vim users!) and more.

Bespin, Skywriter, Ace The Past, Present and Future of online Code Editing

Fabian Jakobs

With modern JavaScript frameworks like ExtJS, SproutCore or qooxdoo, it is possible to create very rich user interfaces using only open web standards. But how do they do it? How do they work internally? In this talk I will open the thorax of a simple qooxdoo widget and look at the various layers and building blocks used to implement it. You will learn how the widget is represented in the DOM, how events are handled, and how the layout engine works. Often there is more than a single way to achieve something. In those cases the different options and qooxdoo's specific design decision will be presented.

Autopsy Of A Widget

Fabian Jakobs

Writing large desktop-like web applications is a challenge. Adapting such an application to different markets, languages or brands is even more of a challenge. This talk shows how the open source JavaScript framework qooxdoo can be leveraged to build such a rich internet application. As a real-life example the free web mail client gmx.com is used. This talk discusses the development model, customization and deployment of such an application. Learn how JavaScript applications of this size and complexity are fundamentally different from classic web applications, and what issues come up when building fast, multi-language, multi-brand JavaScript applications.

Masterin Large Scale Java Script Applications

Fabian Jakobs

Tdd For GuIs

Fabian Jakobs

Test Driven Development ist eines der wichtigsten Methoden aus dem Extreme Programming um hohe Softwarequalität zu garantieren und agil auf Änderungen reagieren zu können. Es hält sich allerdings sehr hartnäckig die Legende, dass man TDD für die Entwicklung von Benutzeroberlächen nicht anwenden kann. In diesem Vortrag werden Architekturansätze und Techniken vorgestellt, die es erlauben testbare Benutzeroberflächen zu schreiben.

Und es geht doch - TDD für GUIs

Fabian Jakobs

Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged

Fabian Jakobs

Going Virtual

Fabian Jakobs

Going Virtual

Fabian Jakobs

Qooxdoo 0.8 - Das Neue Gui Toolkit

Fabian Jakobs

Ajax In Action 2008 - Gui Development With qooxdoo

Fabian Jakobs

DLW Europe - JavaScript Tooling

Fabian Jakobs

Más de Fabian Jakobs (12)

Amsterdam.js talk: node webkit

Bespin, Skywriter, Ace The Past, Present and Future of online Code Editing

Autopsy Of A Widget

Masterin Large Scale Java Script Applications

Tdd For GuIs

Und es geht doch - TDD für GUIs

Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged

Going Virtual

Qooxdoo 0.8 - Das Neue Gui Toolkit

Ajax In Action 2008 - Gui Development With qooxdoo

DLW Europe - JavaScript Tooling

Último

This presentation explores the impact of HTML injection attacks on web applications, detailing how attackers exploit vulnerabilities to inject malicious code into web pages. Learn about the potential consequences of such attacks and discover effective mitigation strategies to protect your web applications from HTML injection vulnerabilities. for more information visit https://bostoninstituteofanalytics.org/category/cyber-security-ethical-hacking/

HTML Injection Attacks: Impact and Mitigation Strategies

Boston Institute of Analytics

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

Scaling API-first – The story of a global engineering organization

Radu Cotescu

Imagine a world where information flows as swiftly as thought itself, making decision-making as fluid as the data driving it. Every moment is critical, and the right tools can significantly boost your organization’s performance. The power of real-time data automation through FME can turn this vision into reality. Aimed at professionals eager to leverage real-time data for enhanced decision-making and efficiency, this webinar will cover the essentials of real-time data and its significance. We’ll explore: FME’s role in real-time event processing, from data intake and analysis to transformation and reporting An overview of leveraging streams vs. automations FME’s impact across various industries highlighted by real-life case studies Live demonstrations on setting up FME workflows for real-time data Practical advice on getting started, best practices, and tips for effective implementation Join us to enhance your skills in real-time data automation with FME, and take your operational capabilities to the next level.

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Safe Software

Advantages of Hiring UIUX Design Service Providers for Your Business

Pixlogix Infotech

Created by Mozilla Research in 2012 and now part of Linux Foundation Europe, the Servo project is an experimental rendering engine written in Rust. It combines memory safety and concurrency to create an independent, modular, and embeddable rendering engine that adheres to web standards. Stewardship of Servo moved from Mozilla Research to the Linux Foundation in 2020, where its mission remains unchanged. After some slow years, in 2023 there has been renewed activity on the project, with a roadmap now focused on improving the engine’s CSS 2 conformance, exploring Android support, and making Servo a practical embeddable rendering engine. In this presentation, Rakhi Sharma reviews the status of the project, our recent developments in 2023, our collaboration with Tauri to make Servo an easy-to-use embeddable rendering engine, and our plans for the future to make Servo an alternative web rendering engine for the embedded devices industry. (c) Embedded Open Source Summit 2024 April 16-18, 2024 Seattle, Washington (US) https://events.linuxfoundation.org/embedded-open-source-summit/ https://ossna2024.sched.com/event/1aBNF/a-year-of-servo-reboot-where-are-we-now-rakhi-sharma-igalia

A Year of the Servo Reboot: Where Are We Now?

Igalia

With more memory available, system performance of three Dell devices increased, which can translate to a better user experience Conclusion When your system has plenty of RAM to meet your needs, you can efficiently access the applications and data you need to finish projects and to-do lists without sacrificing time and focus. Our test results show that with more memory available, three Dell PCs delivered better performance and took less time to complete the Procyon Office Productivity benchmark. These advantages translate to users being able to complete workflows more quickly and multitask more easily. Whether you need the mobility of the Latitude 5440, the creative capabilities of the Precision 3470, or the high performance of the OptiPlex Tower Plus 7010, configuring your system with more RAM can help keep processes running smoothly, enabling you to do more without compromising performance.

Boost PC performance: How more available memory can improve productivity

Principled Technologies

The presentation explores the development and application of artificial intelligence (AI) from its inception to its current status in the modern world. The term "artificial intelligence" was first coined by John McCarthy in 1956 to describe efforts to develop computer programs capable of performing tasks that typically require human intelligence. This concept was first introduced at a conference held at Dartmouth College, where programs demonstrated capabilities such as playing chess, proving theorems, and interpreting texts. In the early stages, Alan Turing contributed to the field by defining intelligence as the ability of a being to respond to certain questions intelligently, proposing what is now known as the Turing Test to evaluate the presence of intelligent behavior in machines. As the decades progressed, AI evolved significantly. The 1980s focused on machine learning, teaching computers to learn from data, leading to the development of models that could improve their performance based on their experiences. The 1990s and 2000s saw further advances in algorithms and computational power, which allowed for more sophisticated data analysis techniques, including data mining. By the 2010s, the proliferation of big data and the refinement of deep learning techniques enabled AI to become mainstream. Notable milestones included the success of Google's AlphaGo and advancements in autonomous vehicles by companies like Tesla and Waymo. A major theme of the presentation is the application of generative AI, which has been used for tasks such as natural language text generation, translation, and question answering. Generative AI uses large datasets to train models that can then produce new, coherent pieces of text or other media. The presentation also discusses the ethical implications and the need for regulation in AI, highlighting issues such as privacy, bias, and the potential for misuse. These concerns have prompted calls for comprehensive regulations to ensure the safe and equitable use of AI technologies. Artificial intelligence has also played a significant role in healthcare, particularly highlighted during the COVID-19 pandemic, where it was used in drug discovery, vaccine development, and analyzing the spread of the virus. The capabilities of AI in healthcare are vast, ranging from medical diagnostics to personalized medicine, demonstrating the technology's potential to revolutionize fields beyond just technical or consumer applications. In conclusion, AI continues to be a rapidly evolving field with significant implications for various aspects of society. The development from theoretical concepts to real-world applications illustrates both the potential benefits and the challenges that come with integrating advanced technologies into everyday life. The ongoing discussion about AI ethics and regulation underscores the importance of managing these technologies responsibly to maximize their their benefits while minimizing potential harms.

Artificial Intelligence: Facts and Myths

Joaquim Jorge

Finology Group – Insurtech Innovation Award 2024

The Digital Insurer

Tata AIG General Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

[2024]Digital Global Overview Report 2024 Meltwater.pdf

hans926745

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

Building Digital Trust in a Digital Economy Veronica Tan, Director - Cyber Security Agency of Singapore Apidays Singapore 2024: Connecting Customers, Business and Technology (April 17 & 18, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

apidays

Partners Life - Insurer Innovation Award 2024

The Digital Insurer

Enterprise Knowledge’s Urmi Majumder, Principal Data Architecture Consultant, and Fernando Aguilar Islas, Senior Data Science Consultant, presented "Driving Behavioral Change for Information Management through Data-Driven Green Strategy" on March 27, 2024 at Enterprise Data World (EDW) in Orlando, Florida. In this presentation, Urmi and Fernando discussed a case study describing how the information management division in a large supply chain organization drove user behavior change through awareness of the carbon footprint of their duplicated and near-duplicated content, identified via advanced data analytics. Check out their presentation to gain valuable perspectives on utilizing data-driven strategies to influence positive behavioral shifts and support sustainability initiatives within your organization. In this session, participants gained answers to the following questions: - What is a Green Information Management (IM) Strategy, and why should you have one? - How can Artificial Intelligence (AI) and Machine Learning (ML) support your Green IM Strategy through content deduplication? - How can an organization use insights into their data to influence employee behavior for IM? - How can you reap additional benefits from content reduction that go beyond Green IM?

Driving Behavioral Change for Information Management through Data-Driven Gree...

Enterprise Knowledge

Handwritten Text Recognition for manuscripts and early printed texts

Maria Levchenko

Developing An App To Navigate The Roads of Brazil

V3cube

💉💊+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHABI}}+971581248768 +971581248768 Mtp-Kit (500MG) Prices » Dubai [(+971581248768**)] Abortion Pills For Sale In Dubai, UAE, Mifepristone and Misoprostol Tablets Available In Dubai, UAE CONTACT DR.Maya Whatsapp +971581248768 We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai, Sharjah, Abudhabi, Ajman, Alain, Fujairah, Ras Al Khaimah, Umm Al Quwain, UAE, Buy cytotec in Dubai +971581248768''''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol, Cytotec” +971581248768' Dr.DEEM ''BUY ABORTION PILLS MIFEGEST KIT, MISOPROTONE, CYTOTEC PILLS IN DUBAI, ABU DHABI,UAE'' Contact me now via What's App…… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all, Cytotec Abortion Pills are Available In Dubai / UAE, you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pill in Dubai, UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if its beyond 6 months. Our Abu Dhabi, Ajman, Al Ain, Dubai, Fujairah, Ras Al Khaimah (RAK), Sharjah, Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical, medical and surgical abortion methods for early through late second trimester, including the Abortion By Pill Procedure (RU 486, Mifeprex, Mifepristone, early options French Abortion Pill), Tamoxifen, Methotrexate and Cytotec (Misoprostol). The Abu Dhabi, United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used, 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi, United Arab Emirates, uses the latest medications for medical abortions (RU-486, Mifeprex, Mifegyne, Mifepristone, early options French abortion pill), Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi, United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our Physicians and staff are always available to answer questions and care for women in one of the most difficult times in their lives. The decision to have an abortion at the Abortion Cl

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

Kick ass code editing and end to end JavaScript debugging

1. Kick ass code editing and end to end JavaScript debugging Fabian Jakobs @fjakobs

2. Code Editor + Debugger = ?

3. Code Editor + Debugger = IDE

5. Overview •Code Editor • IDE Plugins • Debugger

6. Demo

7. Editor

8. ACE Ajax.org Code Editor • nobody will use an IDE if the editor sucks • should be able to replace TextMate

9. Requirements • cross browser • fully featured • conﬁgurable • scalable • hackable

10. Sk y writer Why not Bespin? •inefﬁcient in full screen • not cross browser jQ uer y • dependency on Sproutcore

11. Implementation Options •Content Editable • Canvas • pure DOM

12. Content Editable • not enough control • cross browser issues • not worth it (for code editing)

13. Canvas • full rendering control • no IE6, IE7, IE8 • implement key/mouse interaction manually • O(number of pixels)

14. Pure DOM • draw text, lines, rectangles • implement key/mouse interaction manually • naive O(number of lines) • better O(number of visible lines)

15. DOM + virtual view port .. .. .... .. ... .... . . ... . • rendering a full document in .. . . the DOM doesn‘t scale .. .. • only render visible rows . .. .. .. . .. . .. .. .... . . . .

16. Renderer •DOM is used for drawing only • no state in the DOM • never read the DOM

17. Layers

18. Layers

19. Demo

20. IDE Plugins

21. Everything is a Plugin search ﬁle system code editor new ﬁle language modes save debugger console

22. What is a plugin • JavaScript for client code • JavaScript (node.js) for server code • XML to describe the UI

23. Video

24.

25. Debugger

26. Debugging V8 debugger protocol over socket.io IDE IDE Server Client V8 debugger protocol over TCP ? Application Application (node) in Chrome

27. Demo

28. cloud9 - Eclipse Google Docs - Word

29. Open Source Building Blocks connect node.js socket.io requireJS ACE jsDAV node-github APF node-o3-xml async.js

30. Cloud9 IDE open sourced TODAY

31. Join us in building an IDE by JS devs for JS devs.

32. Thanks for watching! Fork it on GitHub http://github.com/ajaxorg/cloud9

Kick ass code editing and end to end JavaScript debugging

Recomendados

Recomendados

Más contenido relacionado

Similar a Kick ass code editing and end to end JavaScript debugging

Similar a Kick ass code editing and end to end JavaScript debugging (20)

Más de Fabian Jakobs

Más de Fabian Jakobs (12)

Último

Último (20)

Kick ass code editing and end to end JavaScript debugging