JQUERYMOBILE 이후 SPA를 유지하면서 가장 쉬운 만들기 쉬운 하이드리드 앱 조합!!!

svelte + cordova + ionic = 생산성 + 생산성 + 생산성

이라 할 수 있다.

그리고 capacitor 를 이용하면 기존 cordova로 개발한 프로젝트를 코드를 이용해서 마이크레이션(앱 이사하기) 하기도 용이하다.

거기에 속도, 기능, 디자인 요소 등까지 추가되니 이보다 더 좋은 조합을 찾기 어려울 것이다.

무엇보다도 개발이 쉽다.

이번 추석기간을 통해 공실장앱 업데이트를 시도해 보았다. 

결론부터 말하자면, 기존 방법들의 생산성이 너무 떨어 져서 갈아 업는게 진리 라는 결론을 내렸다.

공실장 사이트는 지금까지 한 7번정도 갈아 엎었는데,

이번에는 공실장앱을 갈아 엎을 차례가 온것 같다.

그런데 이번에는 좀 다른게, svelte를 이용해서 사이트와 앱을 동시에 개발할 수 있을것 같다.

기존 공실장앱은 jquerymobile + cordova 조합의 하이브리드앱이었다.

개발하려면 Live Reload가 되지 않아서 디버깅하는데 반복동작을 해줘야했고, 컴포넌트 기능이 없다보니 코드 반복 사용이 많고 비효율적이었다. 

그리고 공실장은 기능이 너무 많아서 기능을 넣으면서 앱 사이즈가 점점 커지고 있어 추후 속도 문제도 고민이었다.

이에 대한 대안으로 최신 업데이트가 지원되는 하이브리드프레임워크인 ionic로 개발하기 위해 오래전 부터시도 하였으나, angluar의 난해함?(바꿔 줘야하는 게 너무 많다. 결국 오래걸리고 복잡한만큼 머리가 복잡해 짐)

때문에 일정이 계속 뒤로 미뤄지고 있었다.

그러다 svelte 라는 녀석을 만나게 되었고, 취근 svelte로 웹프로젝트를 납품하면서, 좀 익숙해지고 있던 차에

혹시 ionic에 svelte 조합이 없을까?  검색해보니 떡하니 

https://github.com/Tommertom/svelte-ionic-app 를 찾아내게 되었고 

와우! 내가 찾고 있던 하이브리드앱 개발 방법론이야!!!

예상 하건데, ionic(capacitor) + svelte 는 하이브리드 앱 개발의 주류가 될 가능성이 높다.

개발이 쉽고, 이쁘고, 속도가 빠르다. 뭘더 바라겠는가! 

아직은 초기라서 위 svelte-ionic-app과 capacitor가 안정화가 충분히 이루어지지 못한 부분도 있지만,

그건 차차 시간이 지남에 따라 보완 되리라 생각된다. 그에 따른 업데이트를 진행하면 될듯하다.

내용을 보아하니 지금 나온 정도만 가지고도 개발에는 큰 무리가 없을듯 하다. 

그래서 지금 공실장앱을 svelte + ionic로  마이그레이션 중이다.

장점 요약

 1. svelte 의 장점 활용가능

    - 경량 : 컴파일 이후 코드 용량이 줄어듬(그리고 가독성이 떨어져서 보안에도 도움)

    - 속도 : 컴파일 이후 거진 바닐라 javascript로 변환되어 가장 높은 속도를 냄

    - 쉬움 : 컴파일이 알아서 경로 잡아줘서 그냥 막 개발해도 됨(javascript + css + html 한파일에 넣고 개발하면 알아서 간섭없이 분리해서 컴파일 됨)

    - spa : 요놈이 되야 웹으로 앱만들수 있는데, 그래서 ionic에서 쓸수 있음(과거 angluar, react, vue 가 그래서 ionic에 도입되었음)

    그외에는 svelte 장점 검색해보시기를..

 2. ionic의 장점 활용

    - 모바일 앱 디자인 최적화

    - 다양한 컴포넌트 보유

    - ionic 버전의 cordova 네이티브앱에 대한 대응 및 그 생태계 보유

  3. capacitor의 장점 활용

    - cordova 및 ionic 버전의 cordova 동시 활용가능

    - 기존 cordova 프로젝트 코드를 활용해서 마이크레이션 용이​

    - cordova의 장점인 한번 개발로 안드로이드 + ios 동시 개발 가능

    - svelte 코드 활용 가능

    - Live Reload(jqm은 이 기능이 잘 안되어서 개발하고 확인하는데 여러 반복동작을 해야해서 오래 걸림)

결론

 그냥 앞으로 다들 이거로 개발해!