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
91
Editing content in Invenio
jmartinm
0
54
BlogForever workshop - Invenio metadata curation
jmartinm
2
61
Other Decks in Technology
See All in Technology
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
970
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
670
RSCの時代にReactとフレームワークの境界を探る
uhyo
11
3.5k
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
Modern Linux
oracle4engineer
PRO
0
160
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
550
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Navigating Team Friction
lara
189
15k
Why Our Code Smells
bkeepers
PRO
339
57k
Facilitating Awesome Meetings
lara
55
6.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Documentation Writing (for coders)
carmenintech
74
5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
What's in a price? How to price your products and services
michaelherold
246
12k
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