Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating a complex Angular 2 application - 3rd ...
Search
Javier Martin Montull
February 14, 2017
Technology
0
39
Creating a complex Angular 2 application - 3rd Developer's conference, CERN
Javier Martin Montull
February 14, 2017
Tweet
Share
More Decks by Javier Martin Montull
See All by Javier Martin Montull
Invenio Interest Group - INSPIRE HEP
jmartinm
0
90
Editing content in Invenio
jmartinm
0
54
BlogForever workshop - Invenio metadata curation
jmartinm
2
61
Other Decks in Technology
See All in Technology
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
110
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
640
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
120
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
220
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
480
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
240
Obsidian応用活用術
onikun94
2
480
Android Audio: Beyond Winning On It
atsushieno
0
110
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
370
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Code Reviewing Like a Champion
maltzj
525
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
We Have a Design System, Now What?
morganepeng
53
7.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Rails Girls Zürich Keynote
gr2m
95
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Transcript
Building a complex Angular 2 application A Journey Javier Martín
Montull 14th February 2017, It’s about U and I Conference, CERN
The challenge
MARC-XML JSON
Devs Librarians
None
–Anonymous INSPIREHEP cataloger How are we going to edit the
content now?
–Anonymous INSPIREHEP developer JSON is a standard, we can use
some ready made solution
https://github.com/jdorn/json-editor
https://github.com/josdejong/jsoneditor
None
Time to build our own (with Angular 2)
Wait, what is TypeScript?
Angular 2 is built with TypeScript Features of ES6 (classes,
inheritance, modules,…) + typings Nice integration in IDEs like VisualStudio Code Get errors early on, good autocompletion Easy to work with
Less concepts and easier than Angular 1 Module Component Metadata
Template Data Binding Service Directive Dependency Injection First observations
Code can be easily organized HTML template Logic Tests Styling
How to get started with your application
Starter packs https://github.com/AngularClass/angular2-webpack-starter https://github.com/angular/angular-cli Nice defaults out of the box
Opinionated for good or bad Started with: Went with:
So we started building our app
https://github.com/inspirehep/record-editor/issues/2 First prototype
Our first road block
None
How change detection works in Angular 2 Source: https://blog.thoughtram.io/angular/2016/02/22/angular-2- change-detection-explained.html
None
None
None
The JSON files on INSPIRE can have up to 2000
authors and 100s of references - 1MB Change detection made the interface VERY slow
Smarter change detection with Immutable JS
None
Before After
What about styling?
https://github.com/valor-software/ng2-bootstrap https://github.com/angular/material Bootstrap 3 & 4 components Material Design components
Official from angular organization Very popular Semantic versioning not respected
Code quality and deployment
None
Code quality (tslint) https://github.com/palantir/tslint Custom lint rules Inline disabling /
enabling of rules Automatic fixing of formatting & style violations Integration with IDEs and build systems (Gulp JS)
Testing
Unit test with Karma + Jasmine
Code coverage with Karma + Istanbul coveralls.io
End-to-End tests with Protractor https://github.com/angular/protractor Protractor runs tests against your
application running in a real browser, interacting with it as a user would.
Documentation
https://github.com/TypeStrong/typedoc
Automatic deployment to npm and github pages
Done through Travis CI deploy: provider: npm skip_cleanup: true email:
[email protected]
api_key: secure: ZO0gp0WoyzYY6/UBbwJVIH8Dt0Vay2Dvc on: tags: true repo: inveniosoftware-contrib/ng2-json-editor all_branches: true node: '6.9.1' after_deploy: - ./deploy-gh-pages.sh (extract of .travis.yml)
Getting closer to the goal
None
None
https://github.com/inveniosoftware-contrib/ng2-json-editor Thank you https://github.com/inspirehep/record-editor